/* ==========================================================================
   Legacy Skin
   --------------------------------------------------------------------------
   העמודים הקיימים כבר בנו אוצר מילים עקבי של רכיבים — feature-card,
   price-card, package-card, gallery, included-list, schedule-grid ועוד.
   הקובץ הזה מלביש את אותו מבנה בדיוק, מגיליון אחד משותף, במקום 121 עותקי CSS.
   מבנה העמוד לא משתנה. רק איך הוא נראה.
   ========================================================================== */

.legacy { --legacy-gap: var(--sp-5); }

/* ---------- סקשנים ---------- */
.legacy .section,
.legacy .content-section {
  padding-block: var(--section-y);
}
.legacy .section-alt,
.legacy .section.section-alt { background: var(--c-sea-050); }
.legacy .section:nth-of-type(even) > .container { }

.legacy .container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.legacy .section-header { margin-bottom: var(--sp-7); max-width: 64ch; }
.legacy .section-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
.legacy .section-description {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: var(--w-prose);
}

/* ---------- הירו הישן: מוסתר, התבנית החדשה מספקת הירו ---------- */
/* ההירו של העמוד נשאר גלוי — התבנית מוסיפה הירו רק כשאין H1 */

/* ---------- גרידים ---------- */
.legacy .grid,
.legacy .features-grid,
.legacy .pricing-cards,
.legacy .schedule-grid,
.legacy .tips-grid,
.legacy .dates-grid,
.legacy .stages-grid,
.legacy .packages-grid,
.legacy .gallery {
  display: grid;
  gap: var(--legacy-gap);
  margin-block: var(--sp-5);
  padding: 0;
  list-style: none;
}

/* ===========================================================================
   ‼️ העמודות **נפרדות** מכלל השמיכה, ולמה
   ---------------------------------------------------------------------------
   בוריס מדד: 13 רשתות נושאות ‎.grid--2‎ ומקבלות שלוש
   עמודות. ‎.legacy .grid‎ הוא (0,2,0) ו-‎.grid--2‎ הוא (0,1,0),
   אז כל הצהרת עמודות כאן דורסת את מה שכותב ב-HTML.

   ו-43 רשתות שנושאות ‎.grid--3‎ עובדות **במקרה** — כי
   המספר שהכלל שלי נותן זהה למקרה למה שהן ביקשו.

   ‼️ **וזו בדיוק הצורה המסוכנת של באג:** 43 מתוך 56
   נראות נכון, ולכן הכלל נראה עובד. מי שיסתכל בדפדפן
   יראה רשתות תקינות ולא ידע ששלוש-עשרה מהן אינן מה שהתבקש.

   הבחירה ב-‎:not([class*="grid--"])‎ ולא בהכפלת מחלקה
   (‎.grid--2.grid--2‎) היא משמעותית: הכלל אומר עכשו מה הוא
   מתכוון — **רשת שלא הצהירה מספר עמודות** — במקום לנצח
   בנפח סגוליות שהבא בתור ייאלץ לנפח עוד.
   =========================================================================== */

.legacy .grid:not([class*="grid--"]),
.legacy .features-grid,
.legacy .pricing-cards,
.legacy .schedule-grid,
.legacy .tips-grid,
.legacy .dates-grid,
.legacy .stages-grid,
.legacy .packages-grid,
.legacy .gallery {
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .legacy .features-grid,
  .legacy .pricing-cards,
  .legacy .tips-grid,
  .legacy .dates-grid,
  .legacy .stages-grid,
  .legacy .packages-grid,
  .legacy .grid:not([class*="grid--"]),
  .legacy .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .legacy .features-grid,
  .legacy .tips-grid,
  .legacy .dates-grid,
  .legacy .stages-grid,
  .legacy .grid:not([class*="grid--"]) { grid-template-columns: repeat(3, 1fr); }
  .legacy .gallery { grid-template-columns: repeat(4, 1fr); }
  .legacy .pricing-cards,
  .legacy .packages-grid { grid-template-columns: repeat(3, 1fr); }
}
.legacy .schedule-grid { gap: var(--sp-3); }

/* ---------- כרטיס פיצ'ר / טיפ / שלב / תאריך ---------- */
.legacy .feature-card,
.legacy .tip-card,
.legacy .stage-card,
.legacy .date-card,
.legacy .accommodation-card,
.legacy .review-card,
.legacy .info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.legacy .feature-card:hover,
.legacy .tip-card:hover,
.legacy .date-card:hover,
.legacy .accommodation-card:hover {
  border-color: var(--c-sea-200);
  box-shadow: var(--shadow-md);
}

.legacy .feature-icon,
.legacy .tip-icon,
.legacy .stage-icon {
  font-size: var(--fs-2xl);
  line-height: 1;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  margin-bottom: var(--sp-2);
}

.legacy .feature-title,
.legacy .tip-card h3,
.legacy .stage-card h3,
.legacy .date-card h3,
.legacy .accommodation-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
  line-height: var(--lh-snug);
}
.legacy .feature-card p,
.legacy .tip-card p,
.legacy .stage-card p { font-size: var(--fs-sm); color: var(--text-body); margin: 0; }

/* כרטיס תאריך — הדגשה, זה המידע שמחפשים */
.legacy .date-card {
  border-inline-start: 4px solid var(--c-gold-500);
  background: var(--c-gold-050);
}
.legacy .date-content { display: flex; flex-direction: column; gap: var(--sp-1); }

/* ---------- כרטיסי מחיר וחבילות — העובדות הכי חשובות בעמוד ---------- */
.legacy .price-card,
.legacy .package-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: start;
}
.legacy .price-card.featured,
.legacy .package-card.featured {
  border: 2px solid var(--c-gold-500);
  background: linear-gradient(180deg, var(--c-gold-050), var(--bg-card) 55%);
  box-shadow: var(--shadow-md);
}
.legacy .featured-badge {
  position: absolute;
  top: calc(var(--sp-3) * -1);
  inset-inline-start: var(--sp-5);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  white-space: nowrap;
}

.legacy .price-type,
.legacy .package-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
}

.legacy .price-amount,
.legacy .package-price {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-navy-800);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
}
.legacy .price-currency,
.legacy .package-currency {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-sea-600);
}
.legacy .price-period,
.legacy .price-description {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.legacy .package-features,
.legacy .package-content ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.legacy .package-features li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  margin: 0;
}
.legacy .package-features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--c-success);
  font-weight: var(--fw-bold);
}

/* ---------- רשימות: כלול / להביא / מידע ---------- */
.legacy .included-list,
.legacy .bring-list,
.legacy .info-list,
.legacy .excluded-list {
  list-style: none;
  padding: var(--sp-5);
  margin-block: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
@media (min-width: 720px) {
  .legacy .included-list,
  .legacy .bring-list,
  .legacy .info-list { grid-template-columns: 1fr 1fr; }
}
.legacy .included-list { border-inline-start: 4px solid var(--c-success); }
.legacy .excluded-list { border-inline-start: 4px solid var(--c-ink-400); }
.legacy .bring-list { border-inline-start: 4px solid var(--c-gold-500); }

.legacy .list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  margin: 0;
}
.legacy .list-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: var(--fs-xs);
  margin-top: 2px;
}
.legacy .included-list .list-icon { background: rgba(23, 121, 74, 0.1); color: var(--c-success); }
.legacy .excluded-list .list-icon { background: rgba(92, 107, 122, 0.12); color: var(--c-ink-500); }

/* ---------- לוח זמנים ---------- */
.legacy .schedule-item {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.legacy .schedule-time {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--c-sea-600);
  direction: ltr;
  unicode-bidi: isolate;
  min-width: 5.5em;
}

/* ---------- גלריה ---------- */
.legacy .gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: #eceff3;
}
.legacy .gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.legacy .gallery-item:hover img { transform: scale(1.05); }

/* ---------- הודעות והדגשות ---------- */
.legacy .important-notice,
.legacy .highlight-box,
.legacy .notice,
.legacy .warning-box {
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-inline-start: 4px solid var(--c-gold-500);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}
.legacy .important-notice h3,
.legacy .highlight-box h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
  color: var(--c-gold-700);
}
.legacy .important-notice p:last-child,
.legacy .highlight-box p:last-child { margin-bottom: 0; }

/* ---------- שאלות נפוצות ---------- */
.legacy .faq-container { margin-block: var(--sp-5); }
.legacy .faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.legacy .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--text-strong);
  min-height: 56px;
  list-style: none;
}
.legacy .faq-question::-webkit-details-marker { display: none; }
.legacy .faq-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-weight: var(--fw-bold);
  transition: transform var(--dur-mid) var(--ease);
}
.legacy .faq-item[open] .faq-toggle,
.legacy .faq-item.active .faq-toggle { transform: rotate(45deg); }
.legacy .faq-answer {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}
/* העמודים הישנים פתחו/סגרו ב-JS. בלי ה-JS הזה הכל צריך להישאר פתוח וקריא. */
.legacy .faq-item:not([open]) .faq-answer { display: block; }

/* ---------- כפתורים ---------- */
.legacy .btn,
.legacy .book-button,
.legacy .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.legacy .btn:hover,
.legacy .book-button:hover,
.legacy .cta-button:hover { background: var(--c-gold-600); color: var(--c-navy-950); }
.legacy .btn-large { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-7); min-height: 56px; }
.legacy .btn-secondary,
.legacy .btn.secondary {
  background: transparent;
  border-color: var(--c-navy-800);
  color: var(--c-navy-800);
}
.legacy .btn-secondary:hover { background: #eceff3; color: var(--text-on-dark); }

/* ---------- דירוג כוכבים ---------- */
.legacy .stars { color: var(--c-gold-500); letter-spacing: 0.08em; direction: ltr; unicode-bidi: isolate; }
.legacy .review-rating, .legacy .accommodation-rating { font-size: var(--fs-sm); }

/* ---------- אינטרו: טקסט + תמונה ---------- */
.legacy .intro-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  margin-block: var(--sp-6);
}
@media (min-width: 900px) {
  /* אסימטריה מכוונת — לא 50/50 */
  .legacy .intro-grid { grid-template-columns: 1.25fr 1fr; }
}
.legacy .intro-image img { border-radius: var(--r-lg); width: 100%; }

/* ==========================================================================
   כללים מבניים גנריים
   --------------------------------------------------------------------------
   לכל עמוד באתר הישן יש שמות מחלקה משלו (club-images, location-header,
   experience-grid ...). עיצוב לפי שם מחלקה לעולם לא יכסה את כולם, ואז
   תמונות נערמות אנכית ונוצרים חורים של אלפי פיקסלים.
   הכללים כאן פועלים לפי המבנה ולא לפי השם, ולכן תופסים גם מחלקות
   שלא ראינו מעולם.
   ========================================================================== */

/* תקרת גובה לכל תמונה בתוכן — בלעדיה תמונה בודדת תופסת מסך שלם */
.legacy img {
  max-height: 520px;
  width: 100%;
  object-fit: cover;
}
.legacy .gallery-item img,
.legacy .card-image img,
.legacy figure img { max-height: none; height: 100%; }

/*
 * כל מכל שיש בו שתי תמונות ישירות או יותר הופך לגריד.
 * :has נתמך בכל הדפדפנים המודרניים; דפדפן ישן פשוט יקבל
 * את הפריסה הקודמת ולא יישבר.
 */
.legacy div:has(> img + img),
.legacy div:has(> a > img):has(> a + a),
.legacy ul:has(> li > img + img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.legacy div:has(> img + img) > img {
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: none;
  border-radius: var(--r-md);
}

/* מכל עם תמונה יחידה גדולה — ממורכז ומוגבל, לא רוחב מלא */
.legacy div:has(> img:only-child) > img {
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--r-md);
}

/* בלוק ריק שנשאר אחרי הסרת תמונה שבורה — לא תופס מקום */
.legacy div:empty,
.legacy section:empty,
.legacy p:empty,
.legacy figure:empty { display: none; }

/* מכל שכל תוכנו נעלם — מתכווץ במקום להשאיר חור */
.legacy [class*="image"]:not(:has(img)):not(:has(picture)):not(img):not(picture):not(svg):not(video) { display: none; }

/* ---------- טיפוגרפיה בתוכן המשומר ---------- */
.legacy h1 { font-size: var(--fs-4xl); }
.legacy h2 { font-size: var(--fs-3xl); margin-top: var(--sp-7); }
.legacy h3 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
.legacy .feature-card h3,
.legacy .price-card h3,
.legacy .package-card h3,
.legacy .tip-card h3,
.legacy .date-card h3 { margin-top: 0; }
.legacy p { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.legacy img { border-radius: var(--r-md); }

/* ---------- טבלאות בתוך התוכן המשומר ---------- */
.legacy table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-block: var(--sp-5);
}
.legacy th, .legacy td {
  padding: var(--sp-3);
  text-align: start;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legacy thead th {
  background: var(--c-navy-900);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-bottom: 0;
}
.legacy tbody tr:nth-child(even) { background: rgba(18, 160, 179, 0.04); }
@media (max-width: 719px) {
  .legacy table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   טפסים משומרים — FormSubmit. המבנה והשדות לא נוגעו, רק המראה.
   ========================================================================== */
.booking-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  box-shadow: var(--shadow-md);
  max-width: 860px;
  margin-inline: auto;
}
.booking-form__note {
  font-size: var(--fs-xs);
  color: var(--c-gold-700);
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
}
.booking-form h2 {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-5);
  text-align: start;
}

/*
 * מבנה הטופס המקורי: <label> ו-<select>/<input> הם אחים ישירים,
 * וקבוצות שדות עטופות ב-.inline-fields. גריד דו-טורי על הטופס עצמו
 * מפריד כל תווית מהשדה שלה — לכן זרימה חד-טורית, והדו-טורי רק בקבוצות.
 */
.booking-form form { display: flex; flex-direction: column; gap: var(--sp-2); }

.booking-form label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.booking-form .inline-fields label:first-child,
.booking-form > form > label:first-of-type { margin-top: 0; }

.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form input[type="number"],
.booking-form input[type="date"],
.booking-form input[type="time"],
.booking-form select,
.booking-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-strong);
  background: var(--c-white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  min-height: 48px;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: var(--c-sea-500);
  outline: 2px solid var(--c-sea-200);
  outline-offset: 1px;
}
.booking-form textarea { min-height: 110px; resize: vertical; }
.booking-form input[type="date"],
.booking-form input[type="time"] { direction: ltr; text-align: start; }

/* קבוצות שדות בשורה אחת */
.booking-form .inline-fields,
.booking-form .return-date-time {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: end;
}
@media (min-width: 640px) {
  .booking-form .inline-fields,
  .booking-form .return-date-time { grid-template-columns: 1fr 1fr; }
}
/* כל שדה בקבוצה עוטף את התווית שלו */
.booking-form .inline-fields > label,
.booking-form .return-date-time > label { margin: 0 0 var(--sp-1); }

/* שדות "אחר" — מוצגים רק כשנבחר, ה-JS המקורי שולט בזה */
.booking-form #custom-from,
.booking-form #custom-to { margin-top: var(--sp-2); }

.booking-form button,
.booking-form input[type="submit"] {
  align-self: flex-start;
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border: 0;
  border-radius: var(--r-full);
  padding: var(--sp-3) var(--sp-7);
  min-height: 52px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.booking-form button:hover,
.booking-form input[type="submit"]:hover { background: var(--c-gold-600); }

/* הודעות מצב — ה-JS המקורי מנהל את התצוגה */
.booking-form #message,
.booking-form #loading-message {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-4);
}
.booking-form #message {
  background: rgba(23, 121, 74, 0.1);
  border: 1px solid var(--c-success);
  color: var(--c-success);
}
.booking-form #loading-message { background: var(--c-sea-050); color: var(--c-sea-600); }

/* ---------- רשימת עובדות שחולצה מטקסט יתום ---------- */
.fact-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.fact-list li {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-sea-050);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ---------- כרטיסי מידע מהתבנית החדשה ---------- */
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.info-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.info-card p { font-size: var(--fs-sm); color: var(--text-body); margin: 0; }
.card-group { margin-block: var(--sp-7); }
.card-group > h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-5); }