/* ธีมการแต่งกาย
   ────────────────────────────────────────────────────────────────
   แขกส่วนใหญ่อ่านการ์ดแล้วคำถามแรกคือ "ใส่อะไรไปดี"
   บอกเป็นตัวหนังสืออย่างเดียวยังเดาสีกันคนละแบบ
   จึงโชว์วงสีจริงให้เทียบกับเสื้อผ้าในตู้ได้เลย

   สีที่เลือกมาจากดอกไม้สีเทียนบนการ์ดเชิญ ชุดของแขกจะได้เข้ากับงาน */

.dresscode {
  padding: 68px 20px 76px;
  text-align: center;
}

.dresscode-inner { width: min(100%, 620px); margin: 0 auto; }

.dresscode h2 { margin: 10px 0 12px; }

.dresscode > .dresscode-inner > p {
  color: #806156;
  line-height: 1.95;
  margin: 0 0 34px;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px 12px;
  margin: 0 0 30px;
  list-style: none;
  padding: 0;
}

.swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.swatch i {
  display: block;
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  /* ขอบบางสีเดียวกับพื้นหลัง กันสีอ่อนมากจนดูเหมือนหายไปกับกระดาษ */
  box-shadow: inset 0 0 0 1px #00000010, 0 4px 12px #70473e14;
}

.swatch span { font-size: 13px; line-height: 1.6; color: #8c685b; }

.dress-note {
  display: inline-block;
  text-align: left;
  background: #fffdfd;
  border: 1px solid #f0dbe1;
  border-radius: 18px;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 2;
  color: #7a5a4c;
}

.dress-note b { color: #583a29; }

@media (max-width: 560px) {
  .dresscode { padding: 54px 16px 62px; }
  .swatches { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
  .swatch i { max-width: 78px; }
  .swatch span { font-size: 12.5px; }
  .dress-note { padding: 18px 18px; font-size: 14.5px; }
}