/* ============================================================
   Jersey Girls — Bootstrap 5 theme layer
   ============================================================ */

/* ── Brand tokens ───────────────────────────────────────── */
:root {
  --navy:        #1c2b4a;
  --navy-deep:   #111d30;
  --navy-mid:    #2a3d5e;
  --cream:       #fdf9f4;
  --cream-warm:  #f4ede1;
  --caramel:     #e8a87c;
  --caramel-deep:#c47d48;
  --sage:        #8fb8b0;
  --sage-pale:   #dce9e6;
  --blush:       #f0d5cc;
  --blush-pale:  #faf0eb;
  --slate:       #5a6a7e;
  --slate-light: #8ca9c8;
  --border:      rgba(28,43,74,0.1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  40px;

  --shadow-sm:  0 2px 12px rgba(28,43,74,0.08);
  --shadow-md:  0 8px 32px rgba(28,43,74,0.12);
  --shadow-lg:  0 20px 60px rgba(28,43,74,0.15);

  --max-w:  1200px;
  --nav-h:  68px;
}

/* ── Brand tokens → Bootstrap theme variables ───────────── */
:root {
  --bs-font-sans-serif:   var(--font-body);
  --bs-body-font-family:  var(--font-body);
  --bs-body-font-weight:  400;
  --bs-body-line-height:  1.7;
  --bs-body-color:        var(--navy);
  --bs-body-color-rgb:    28, 43, 74;
  --bs-body-bg:           var(--cream);
  --bs-body-bg-rgb:       253, 249, 244;
  --bs-secondary-color:   var(--slate);
  --bs-heading-color:     var(--navy);
  --bs-border-color:      var(--border);
  --bs-border-radius:     var(--radius-sm);
  --bs-border-radius-lg:  var(--radius-md);
  --bs-border-radius-xl:  var(--radius-lg);
  --bs-link-decoration:   none;
  --bs-emphasis-color:    var(--navy);
}

/* ── Base ───────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: var(--nav-h); /* keeps #anchors clear of the fixed navbar */
}
body { -webkit-font-smoothing: antialiased; }

/* Reboot gives margins to headings/paragraphs/lists; this design is
   built on zero margins plus Bootstrap spacing utilities. */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
b, strong {
    font-weight: 600;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }   /* brand links carry their own colour */

.bg-cream      { background: var(--cream); }
.bg-cream-warm { background: var(--cream-warm); }
.bg-navy       { background: var(--navy); }

/* ── Extra spacer step ──────────────────────────────────────
   Bootstrap's scale stops at 3rem. `6` = 4.5rem (72px).
   On the Sass build, add `6: $spacer * 4.5` to $spacers instead. */
.m-6  { margin: 4.5rem !important; }
.mt-6 { margin-top: 4.5rem !important; }
.mb-6 { margin-bottom: 4.5rem !important; }
.my-6 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.p-6  { padding: 4.5rem !important; }
.pt-6 { padding-top: 4.5rem !important; }
.pb-6 { padding-bottom: 4.5rem !important; }
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

/* ── Container ──────────────────────────────────────────────
   Bootstrap's .container, retuned to the brand's 1200px width and
   fluid side padding. Bootstrap halves the gutter per side, so
   16vw here == the old clamp(20px, 8vw, 60px) of padding. */
.container,
.container-sm, .container-md, .container-lg,
.container-xl, .container-xxl {
  --bs-gutter-x: clamp(40px, 16vw, 120px);
}
.container { max-width: var(--max-w); }

/* ── Vertical rhythm ────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 112px) 0; }

/* ── Typography scale ───────────────────────────────────────
   Brand display faces. Deliberately not Bootstrap's .display-1…6,
   which are a different family and scale. */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 74px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600; line-height: 1.15;
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600; line-height: 1.2;
}
.kicker {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #995A2E;
}

.body-lg { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--slate); }
.body-md { font-size: 16px; font-weight: 300; line-height: 1.7;  color: var(--slate); }
.body-sm { font-size: 14px; line-height: 1.65; color: var(--slate); }
.body-xs { font-size: 12px; line-height: 1.5;  color: var(--slate-light); }

/* ── Buttons (Bootstrap .btn, re-skinned) ───────────────── */
.btn {
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 32px;
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.4;
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-radius: var(--radius-xl);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.03em;
  transition: all 0.25s ease;
}

.btn-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: var(--caramel);
  --bs-btn-border-color: var(--caramel);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--caramel-deep);
  --bs-btn-hover-border-color: var(--caramel-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--caramel-deep);
  --bs-btn-active-border-color: var(--caramel-deep);
  --bs-btn-focus-shadow-rgb: 232, 168, 124;
}
.btn-primary:hover { transform: translateY(-1px); }

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,0.1);
  --bs-btn-hover-border-color: rgba(255,255,255,0.6);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,0.15);
  --bs-btn-active-border-color: rgba(255,255,255,0.6);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-outline-dark {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 28, 43, 74;
}

/* Underlined text button — a brand variant, still a .btn */
.btn-ghost {
  --bs-btn-color: #A5531D;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--caramel-deep);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 10px;
  --bs-btn-border-radius: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  
}
.btn-ghost:hover { border-bottom-color: #A5531D; }

/* ── Badges (Bootstrap .badge, re-skinned) ──────────────── */
.badge {
  --bs-badge-padding-x: 12px;
  --bs-badge-padding-y: 4px;
  --bs-badge-font-size: 13px;
  --bs-badge-font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;   /* Bootstrap's default is 1; the brand chips are taller */
}
.badge-caramel    { --bs-badge-color: #965D31; background-color: #fdf0e5; }
.badge-sage       { --bs-badge-color: #2a6b62;             background-color: var(--sage-pale); }
.badge-blush      { --bs-badge-color: #8a3a2a;             background-color: var(--blush-pale); }
.badge-navy       { --bs-badge-color: var(--navy);         background-color: rgba(28,43,74,0.08); }
.badge-navy-solid { --bs-badge-color: #fff;                background-color: var(--navy); }

/* ── Cards (Bootstrap .card, re-skinned) ────────────────── */
.card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-spacer-x: 24px;
  --bs-card-spacer-y: 24px;
}

/* ── Navbar (Bootstrap .navbar, re-skinned) ─────────────── */
.site-nav {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: rgba(200,217,240,0.8);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: var(--caramel);
  --bs-navbar-nav-link-padding-x: 16px;
  background: var(--navy);
  transition: box-shadow 0.3s ease;
}
.site-nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.site-nav > .container-fluid {
  --bs-gutter-x: clamp(40px, 10vw, 120px);
  min-height: var(--nav-h);
}
.site-nav .navbar-brand img { height: 34px; filter: brightness(0) invert(1); }
.site-nav .nav-link {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-top: 8px; padding-bottom: 8px;
}
.site-nav .navbar-collapse { background: var(--navy); }

@media (max-width: 991.98px) {
  :root { --nav-h: 56px; }
  .site-nav .navbar-collapse {
    padding: 12px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
}

/* ── Accordion (FAQ) ────────────────────────────────────── */
.faq-list {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255,255,255,0.1);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 20px;
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-btn-icon-width: 20px;
  --bs-accordion-btn-icon-transform: rotate(45deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8a87c'%3e%3cpath d='M8.75 2.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e8a87c'%3e%3cpath d='M8.75 2.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5z'/%3e%3c/svg%3e");
}
/* Top rule on every item, bottom rule on the last — no side borders */
.faq-list .accordion-item { border-width: 1px 0 0; }
.faq-list .accordion-item:last-child { border-bottom-width: 1px; }
.faq-list .accordion-button {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  gap: 16px;
}
.faq-list .accordion-button:not(.collapsed) { box-shadow: none; }
.faq-list .accordion-body {
  font-size: 15px; font-weight: 300; line-height: 1.7;
  color: var(--slate-light);
  padding: 12px 0 20px;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
/* .breadcrumb {
  --bs-breadcrumb-font-size: 13px;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-item-padding-x: 6px;
  --bs-breadcrumb-item-active-color: var(--navy);
  --bs-breadcrumb-divider-color: var(--slate-light);
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ca9c8'%3e%3cpath d='M6.22 3.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06L9.44 8 6.22 4.78a.75.75 0 0 1 0-1.06z'/%3e%3c/svg%3e");
} */
.breadcrumb-item a { color: #A5531D; font-weight: 500; }
.breadcrumb-item.active { font-weight: 500; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert-notice {
  --bs-alert-bg: #fef9ed;
  --bs-alert-border-color: #f3d69b;
  --bs-alert-color: #7a5a1e;
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-x: 24px;
  --bs-alert-padding-y: 18px;
  font-size: 14px; line-height: 1.6;
}
.alert-notice strong { font-weight: 500; }

.alert-soldout {
  --bs-alert-bg: var(--blush-pale);
  --bs-alert-border-color: transparent;
  --bs-alert-color: var(--slate);
  --bs-alert-border-radius: var(--radius-md);
  --bs-alert-padding-x: 20px;
  --bs-alert-padding-y: 20px;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  --bs-border-color: rgba(255,255,255,0.08);
  background: var(--navy-deep);
  color: #fff;
}
.site-footer .footer-logo { height: 36px; opacity: 0.85; filter: brightness(0) invert(1); }
.site-footer .footer-blurb { font-size: 14px; color: var(--slate-light); line-height: 1.7; max-width: 280px; }
.site-footer h4 {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--caramel);
}
.site-footer .footer-link { font-size: 14px; color: var(--slate-light); transition: color 0.2s; }
.site-footer .footer-link:hover { color: #fff; }
.site-footer .footer-bottom p { font-size: 12px; color: rgba(200,217,240,0.75); }
.site-footer .footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--slate-light); font-size: 16px;
  transition: all 0.2s;
}
.site-footer .footer-social a:hover { border-color: var(--caramel); color: var(--caramel); }

/* ── Decorative ─────────────────────────────────────────── */
.wave-divider { line-height: 0; display: block; margin-bottom: -2px; }
.wave-divider svg { display: block; width: 100%; }

.page-hero {
  background: var(--navy);
  padding: 140px 0 0;
  text-align: center;
  margin-bottom: -2px;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: var(--slate-light); max-width: 520px; margin: 16px auto 0; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp 0.7s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }
.fade-up-4 { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
}

/* ── Hero ── */
.hero {
  min-height: 90vh;
  padding-top: var(--nav-h);
}
.hero-scrim {
  background: linear-gradient(to right,
    rgba(17,29,48,0.88) 0%,
    rgba(17,29,48,0.65) 50%,
    rgba(17,29,48,0.2) 100%);
}
.hero-inner { z-index: 2; padding-bottom: 80px; }
.hero-text { max-width: 560px; }
.hero-accent { color: var(--caramel); }
.hero-lede { color: rgba(255,255,255,0.75); max-width: 420px; }
.hero-btns { margin-top: 36px; }
.hero-bottom-wave { bottom: -1px; line-height: 0; z-index: 3; }
.hero-bottom-wave svg { display: block; width: 100%; }

.soldout-lede { max-width: 480px; }

/* ── Hire cards ── */
.hire-card { border-radius: var(--radius-xl); }
.hire-card-dark  { background: var(--navy); }
.hire-card-cream { background: #fff; border: 1px solid var(--border); }

.hire-card-img { --bs-aspect-ratio: 43.75%; }  /* 16:7 */
.hire-card-img img { transition: transform 0.4s ease; }
.hire-card:hover .hire-card-img img { transform: scale(1.03); }

.hire-card-body { padding: 36px; }
.hire-copy { font-size: 15px; line-height: 1.7; color: var(--slate); }
.hire-copy-light { color: rgba(255,255,255,0.72); }

.hire-bullets li { font-size: 14px; color: rgba(255,255,255,0.78); }
.hire-bullets i { color: var(--caramel); font-size: 16px; flex-shrink: 0; }
.hire-bullets-dark li { color: var(--slate); }
.hire-bullets-dark i { color: var(--caramel-deep); }

/* ── FAQ ── */
.faq-row { --bs-gutter-x: 80px; --bs-gutter-y: 40px; }
.faq-intro { color: var(--slate-light); }
.faq-email { color: var(--caramel); }

@media (max-width: 991.98px) {
  .faq-row { --bs-gutter-x: 40px; }
}
@media (max-width: 860px) {
  .hero { min-height: 80vh; }
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(17,29,48,0.7) 0%,
      rgba(17,29,48,0.75) 100%);
  }
}

/* Bespoke treatments only — layout, spacing and the chip come from Bootstrap. */
.event-card {
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.event-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.event-card-img { background: var(--cream-warm); }
.event-card-img img { transition: transform 0.4s ease; }
.event-card:hover .event-card-img img { transform: scale(1.04); }

.event-tag { top: 14px; left: 14px; letter-spacing: 0.12em; }

.event-sold-overlay { background: rgba(17,29,48,0.55); }
.event-sold-badge {
  --bs-badge-padding-x: 20px;
  --bs-badge-padding-y: 8px;
  --bs-badge-font-size: 13px;
  --bs-badge-color: #fff;
  background-color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: none;
}

.event-card-date {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em;
  color: #7A4620;
}
.event-card-date i { font-size: 14px; }

.event-card-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--navy); line-height: 1.25;
}

.event-card-blurb { line-height: 1.6; }

.event-card-price { font-size: 14px; font-weight: 500; color: var(--navy); }
.event-card-avail { font-size: 12px; font-weight: 500; color: var(--slate); }
.event-card-avail.urgent { color: var(--caramel-deep); }
.event-card-avail i { font-size: 14px; }

/* EVENT PAGE */
  .bg-cream-warm {
    background: var(--cream-warm);
  }

  .content-page{
    padding-top: 88px;
  }
  
  /* ── Breadcrumb ── */
  .breadcrumb-bar {
    background: var(--cream);
    padding-top: 88px;
  }

  /* ── Layout ── */
  .event-layout {
    --bs-gutter-x: 56px;
    --bs-gutter-y: 0;
  }

  /* ── Media column ── */
  .event-hero-img {
    border-radius: var(--radius-lg);
    background: var(--cream-warm);
  }
  .event-tag {
    letter-spacing: 0.12em;
  }

  .gallery-strip {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
    margin-top: 0;
  }
  .gallery-thumb {
    border-radius: var(--radius-sm);
    background: var(--cream-warm);
  }

  .event-description {
    margin-top: 36px;
  }
  .description-panel {
    --bs-card-border-radius: var(--radius-xl);
    --bs-card-inner-border-radius: calc(var(--radius-xl) - 1px);
    box-shadow: var(--shadow-md);
  }

  /* ── Booking panel ── */
  .booking-panel {
    --bs-card-border-radius: var(--radius-xl);
    --bs-card-inner-border-radius: calc(var(--radius-xl) - 1px);
    top: 88px;
    box-shadow: var(--shadow-md);
  }

  .booking-header {
    background: var(--navy);
    padding: 28px 28px 24px;
  }
  .booking-date {
    font-size: 22px;
    font-weight: 500;
    color: var(--caramel);
  }
  .booking-date i {
    font-size: 25px;
  }
  .booking-blurb {
    color: rgba(255, 255, 255, 0.68);
  }

  .booking-section-label, .description-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #A5531D;
  }
  .booking-section-label i, .description-label i {
    font-size: 16px;
  }

  .booking-tickets {
    padding: 24px 28px;
  }

  .avail-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate);
  }
  .avail-label i {
    font-size: 15px;
  }
  .avail-urgent {
    color: var(--caramel-deep);
  }

  .sold-out-label {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: #8a3a2a;
  }

  .booking-tiers {
    padding: 24px 28px;
  }
  .tier-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
  }
  .tier-note {
    font-size: 12px;
    color: var(--slate);
    margin-top: 2px;
  }
  .tier-save {
    font-size: 11px;
    font-weight: 500;
    color: #2a6b62;
    margin-top: 4px;
  }
  .tier-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
  }

  .booking-details, .description-details {
    padding: 24px 28px;
  }
  .detail-row {
    font-size: 13px;
  }
  .detail-label {
    flex-basis: 90px;
    font-weight: 500;
    color: var(--slate);
  }
  .detail-value {
    color: var(--navy);
    line-height: 1.5;
  }

  /* ── Responsive ── */
  @media (max-width: 991.98px) {
    .booking-panel {
      position: static !important;
      margin-top: 32px;
    }
    .event-description.d-lg-none {
      margin-top: 16px;
      padding: 0 20px;
    }
  }
  @media (max-width: 575.98px) {
    .gallery-strip {
      --bs-gutter-x: 6px;
      --bs-gutter-y: 6px;
    }
    .booking-header {
      padding: 22px 20px;
    }
    .booking-tickets,
    .booking-tiers,
    .booking-details,
    .description-details {
      padding: 20px;
    }
  }