@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

@font-face {
  font-family: 'canva_YAGLy65PgHg';
  src: url('assets/fonts/a47da801400c0b31c613cceb64529332.woff2') format('woff2'), url('assets/fonts/590a1e2a72f8dfdd9583832f6d9cc487.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'canva_YAEz2L9phwY';
  src: url('assets/fonts/d9b12cc7357ddc840198d7567b0d6a1b.woff2') format('woff2'), url('assets/fonts/6731a0511d323007257ce8fc9b2beb62.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'canva_YACgEVY5j_w';
  src: url('assets/fonts/d80614b34598b4f9851d1f4b271f8ba5.woff2') format('woff2'), url('assets/fonts/2856574752a9b1dea3606ccdc07a376b.woff') format('woff');
  font-display: swap;
}

:root {
  --canvas-width: 1366px;
  --cream: #f8f3f0;
  --maroon: #6a3137;
  --ink: #241315;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #ece8e4;
  color: var(--ink);
  font-family: serif;
  overflow-x: hidden;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
}

.page {
  width: var(--canvas-width);
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}

.section {
  position: relative;
  overflow: hidden;
}

.txt,
.img-wrap,
.line,
.avatar,
.local-map {
  position: absolute;
  transform-origin: top left;
}

.txt {
  margin: 0;
}

.txt[style*="canva_YACgEVY5j_w"] {
  font-family: 'Playfair Display', serif !important;
}

/* Keep large display headers as-is, but use Playfair on smaller headings and schedule text. */
.section--program .program-date,
.section--program .program-time,
.section--program .program-event,
.local-card-title,
.faq-gavor-title,
.faq-boende-title,
.faq-barn-title,
.faq-dress-title,
.toast-question {
  font-family: 'Playfair Display', serif !important;
}

.avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.section-header {
  left: 0 !important;
  width: 100% !important;
  text-align: center !important;
  font-family: 'canva_YAGLy65PgHg', serif !important;
  font-weight: normal;
}

.line {
  min-height: 1px;
}

.program-date {
  left: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

#countdown {
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(16px, 2.4vw, 36px) !important;
  line-height: 1.1 !important;
}

.intro-couple-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.intro-couple-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #efe6e2;
}

.intro-couple-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jt-mark {
  -webkit-mask: url('assets/media/jt.svg') center / contain no-repeat;
  mask: url('assets/media/jt.svg') center / contain no-repeat;
}

.jt-mark-hero {
  background-color: #f8f3f0;
}

.jt-mark-footer {
  background-color: #6a3137;
}

.jt-mark-intro {
  background-color: #6a3137;
}

.section--program {
  position: relative;
}

.section--program .program-timeline {
  position: absolute;
  left: 130px;
  right: 130px;
  top: 220px;
  bottom: 58px;
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  grid-template-rows: repeat(7, minmax(58px, 1fr));
  align-items: center;
}

.section--program .program-axis {
  grid-column: 2;
  grid-row: 1 / 8;
  justify-self: center;
  align-self: stretch;
  width: 2px;
  background: rgba(106, 49, 55, 0.52);
}

.section--program .program-item {
  display: contents;
}

.section--program .program-dot {
  grid-column: 2;
  grid-row: var(--row);
  justify-self: center;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(106, 49, 55, 0.95);
  z-index: 3;
}

.section--program .program-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.section--program .program-card {
  position: relative;
  max-width: 380px;
  color: var(--maroon);
  z-index: 2;
}

.section--program .is-right .program-card {
  grid-column: 3;
  grid-row: var(--row);
  justify-self: start;
  text-align: left;
  padding-left: 28px;
}

.section--program .is-left .program-card {
  grid-column: 1;
  grid-row: var(--row);
  justify-self: end;
  text-align: right;
  padding-right: 28px;
}

.section--program .is-right .program-card::before,
.section--program .is-left .program-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(106, 49, 55, 0.42);
}

.section--program .is-right .program-card::before {
  left: 0;
}

.section--program .is-left .program-card::after {
  right: 0;
}

.section--program .program-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section--program .is-left .program-card-inner {
  flex-direction: row-reverse;
}

.section--program .program-copy {
  max-width: 210px;
}

.section--program .is-left .program-copy {
  text-align: right;
}

.section--program .is-right .program-copy {
  text-align: left;
}

.section--program .program-time {
  margin: 0;
  font-family: 'canva_YACgEVY5j_w', serif;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section--program .program-event {
  margin: 3px 0 0;
  font-family: 'canva_YACgEVY5j_w', serif;
  font-size: 19px;
  line-height: 1.16;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.faq-dress-note {
  white-space: normal !important;
}

.dress-swatches {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dress-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(106, 49, 55, 0.22);
  display: inline-block;
}

.dress-swatch--brown { background: #7a5a3a; }
.dress-swatch--beige { background: #d9c4a2; }
.dress-swatch--darkgreen { background: #35563d; }
.dress-swatch--wine { background: #7a2a36; }
.dress-swatch--khaki { background: #b8ad76; }
.dress-swatch--navy { background: #24395f; }
.dress-swatch--black { background: #161616; }
.dress-swatch--darkgray { background: #4a4a4a; }

.cloud-tint img {
  filter: sepia(0.55) hue-rotate(-28deg) saturate(0.68) brightness(0.8);
}

.local-map {
  border: 1px solid rgba(106, 49, 55, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.local-photo {
  border: 1px solid rgba(106, 49, 55, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 9;
}

.local-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.local-parking {
  left: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

.footer-signature {
  display: inline-block;
  white-space: nowrap;
}

.section--footer .footer-ending {
  border-radius: 10px;
}

.section--footer .footer-ending img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 901px) {
  .section--hero {
    height: 100vh !important;
    min-height: 100vh;
  }

  /* Let Detaljer content size itself instead of relying on fixed exported coordinates. */
  .section--faqs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 92px 18px 70px;
    height: auto !important;
    min-height: 0;
  }

  .section--faqs > .txt,
  .section--faqs > .img-wrap,
  .section--faqs > .line,
  .section--faqs > .avatar,
  .section--faqs > .local-map {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 900px;
    height: auto !important;
    margin: 0;
  }

  .section--faqs .section-header { order: 1; margin-bottom: 8px; }
  .section--faqs .faq-dress-title { order: 2; }
  .section--faqs .faq-dress-value { order: 3; }
  .section--faqs .faq-dress-note { order: 4; }
  .section--faqs .faq-barn-title { order: 5; margin-top: 8px; }
  .section--faqs .faq-barn-desc { order: 6; }
  .section--faqs .faq-boende-title { order: 7; margin-top: 8px; }
  .section--faqs .faq-boende-desc { order: 8; }
  .section--faqs .faq-gavor-title { order: 9; margin-top: 8px; }
  .section--faqs .faq-gavor-body { order: 10; }

  /* Same fix pattern for RSVP: remove fixed canvas spacing on desktop. */
  .section--rsvp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 92px 18px 76px;
    height: auto !important;
    min-height: 0;
  }

  .section--rsvp > .txt,
  .section--rsvp > .img-wrap,
  .section--rsvp > .line,
  .section--rsvp > .avatar,
  .section--rsvp > .local-map {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 920px;
    height: auto !important;
    margin: 0;
  }

  .section--rsvp .section-header { order: 1; margin-bottom: 8px; }
  .section--rsvp .rsvp-text {
    order: 2;
    max-width: 42ch;
    font-size: 19.965px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}

@media (max-width: 900px) {
  body {
    background: var(--cream);
  }

  .page {
    position: relative;
    left: 0;
    top: 0;
    width: 100% !important;
    transform: none !important;
  }

  .section {
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: clamp(22px, 6vw, 34px) 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .section > .txt,
  .section > .img-wrap,
  .section > .line,
  .section > .avatar,
  .section > .local-map {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    margin: 0;
  }

  .section > .txt {
    white-space: pre-line !important;
    text-align: center !important;
  }

  .section-header {
    left: auto !important;
    width: 100% !important;
    margin: 0 0 6px;
    font-size: clamp(40px, 13vw, 64px) !important;
    line-height: 1.04 !important;
  }

  #countdown {
    white-space: nowrap !important;
    font-size: clamp(14px, 4.4vw, 20px) !important;
    line-height: 1.25 !important;
    padding: 12px 6px 4px;
    margin-top: 8px;
    border-top: 0;
    border-bottom: 0;
  }

  .section--hero {
    background: var(--maroon) !important;
    min-height: 100svh;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    gap: 8px;
  }

  .section--hero .hero-divider {
    display: none;
  }

  .section--hero .hero-house {
    order: 1;
    width: min(100%, 430px) !important;
    height: clamp(220px, 40vh, 330px) !important;
    margin: 0 auto 4px;
    opacity: 0.92;
    border-radius: 8px;
    overflow: hidden;
  }

  .section--hero .hero-house img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 36% !important;
  }

  .section--hero .hero-names {
    order: 2;
    width: auto !important;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(64px, auto) auto;
    grid-template-areas:
      "t therese"
      "amp ."
      "j johan";
    align-items: end;
    justify-content: center;
    column-gap: 0;
    row-gap: 0;
    margin: 0 auto;
  }

  .section--hero .hero-names .txt {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    letter-spacing: -0.5px !important;
  }

  .section--hero .hero-initial-t {
    grid-area: t;
    font-size: clamp(84px, 23vw, 110px) !important;
    line-height: 0.62 !important;
    text-align: right !important;
    margin-right: -16px !important;
    margin-bottom: -4px !important;
  }

  .section--hero .hero-name-tail-therese {
    grid-area: therese;
    font-size: clamp(54px, 14.8vw, 72px) !important;
    line-height: 0.86 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .section--hero .hero-amp {
    grid-area: amp;
    justify-self: start;
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 0.72 !important;
    margin-top: -6px !important;
    margin-bottom: -12px !important;
    margin-left: 4px !important;
  }

  .section--hero .hero-initial-j {
    grid-area: j;
    font-size: clamp(78px, 22vw, 104px) !important;
    line-height: 0.62 !important;
    text-align: right !important;
    margin-right: -18px !important;
    margin-bottom: -6px !important;
  }

  .section--hero .hero-name-tail-johan {
    grid-area: johan;
    font-size: clamp(54px, 14.8vw, 72px) !important;
    line-height: 0.86 !important;
    text-align: left !important;
    margin-left: 0 !important;
  }

  .section--hero .hero-subtitle {
    order: 3;
    margin-top: 4px;
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: 1.7px !important;
    text-transform: uppercase !important;
  }

  .section--hero .hero-date-left {
    order: 4;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    margin-top: -1px;
  }

  .section--hero .hero-date-right {
    order: 5;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    margin-top: -4px;
  }

  .section--hero .hero-logo {
    order: 6;
    width: 138px !important;
    aspect-ratio: 369 / 259;
    margin-top: 6px;
    align-self: center;
  }

  .section--intro {
    padding-top: 28px;
    padding-bottom: 34px;
    gap: 16px;
  }

  .section--intro .intro-copy {
    line-height: 1.75 !important;
    max-width: 38ch;
    margin-inline: auto;
  }

  .section--intro .intro-copy-lead {
    font-size: 15px !important;
  }

  .section--intro .intro-copy-sub {
    font-size: 13px !important;
    line-height: 1.65 !important;
    max-width: 42ch;
  }

  .section--intro .intro-logo {
    width: 112px !important;
    aspect-ratio: 369 / 259;
    height: auto !important;
    align-self: center;
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .section--intro .intro-couple-grid {
    width: min(100%, 360px) !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 4px;
  }

  .section--local {
    padding-top: 28px;
    padding-bottom: 34px;
    gap: 12px;
  }

  .section--local .local-card-title {
    width: min(100%, 320px) !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: 2.4px !important;
    text-transform: uppercase !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .section--local .local-map-link {
    width: min(100%, 320px) !important;
    margin-top: -6px;
    margin-bottom: 4px;
    font-size: 15px !important;
    line-height: 1.3 !important;
    opacity: 0.88;
  }

  .section--local .local-vigsel { order: 1; }
  .section--local .local-map-link-vigsel { order: 2; }
  .section--local .local-photo-vigsel {
    order: 3;
    width: min(100%, 330px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    align-self: center;
    margin-bottom: 8px;
  }
  .section--local .local-map-vigsel {
    order: 4;
    width: min(100%, 330px) !important;
    height: 200px !important;
    align-self: center;
    margin-bottom: 8px;
  }
  .section--local .local-fest { order: 5; }
  .section--local .local-map-link-fest { order: 6; }
  .section--local .local-photo-fest {
    order: 7;
    width: min(100%, 330px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    align-self: center;
    margin-bottom: 8px;
  }
  .section--local .local-map-fest {
    order: 8;
    width: min(100%, 330px) !important;
    height: 200px !important;
    align-self: center;
  }
  .section--local .local-parking {
    order: 9;
    width: min(100%, 360px) !important;
    margin-top: 8px;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .section--program {
    align-items: stretch;
    gap: 0;
    padding: 30px 14px 34px;
  }

  .section--program .section-header {
    order: 1;
  }

  .section--program .program-date {
    order: 2;
    margin-bottom: 8px;
    font-size: 13px !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    opacity: 0.75;
  }

  .section--program .program-timeline {
    order: 3;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, 382px);
    margin: 6px auto 0;
    grid-template-columns: 1fr 30px 1fr;
    grid-template-rows: repeat(7, minmax(66px, auto));
  }

  .section--program .program-axis {
    width: 2px;
  }

  .section--program .program-dot {
    width: 6px;
    height: 6px;
  }

  .section--program .program-icon {
    width: 26px;
    height: 26px;
  }

  .section--program .program-card {
    max-width: none;
  }

  .section--program .is-right .program-card {
    padding-left: 8px;
  }

  .section--program .is-left .program-card {
    padding-right: 8px;
  }

  .section--program .is-right .program-card::before,
  .section--program .is-left .program-card::after {
    width: 5px;
  }

  .section--program .program-card-inner {
    gap: 8px;
  }

  .section--program .program-copy {
    max-width: 128px;
  }

  .section--program .program-time {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .section--program .program-event {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.8px;
    line-height: 1.18;
  }

  .section--faqs {
    position: relative;
    align-items: stretch;
    gap: 8px;
    padding: 32px 18px 38px;
  }

  .section--faqs .faq-cloud {
    position: absolute !important;
    left: 50% !important;
    top: 18px !important;
    width: 140% !important;
    transform: translateX(-50%) !important;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
  }

  .section--faqs > :not(.faq-cloud) {
    position: relative !important;
    z-index: 1;
  }

  .section--faqs .section-header { order: 1; }
  .section--faqs .faq-dress-title { order: 2; }
  .section--faqs .faq-dress-value { order: 3; }
  .section--faqs .faq-dress-note { order: 4; }
  .section--faqs .faq-barn-title { order: 5; }
  .section--faqs .faq-barn-desc { order: 6; }
  .section--faqs .faq-boende-title { order: 7; }
  .section--faqs .faq-boende-desc { order: 8; }
  .section--faqs .faq-gavor-title { order: 9; }
  .section--faqs .faq-gavor-body { order: 10; }

  .section--faqs .faq-barn-title,
  .section--faqs .faq-boende-title,
  .section--faqs .faq-dress-title,
  .section--faqs .faq-gavor-title {
    margin-top: 10px;
    font-size: 22px !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
  }

  .section--faqs .faq-barn-desc,
  .section--faqs .faq-boende-desc,
  .section--faqs .faq-dress-value,
  .section--faqs .faq-dress-note,
  .section--faqs .faq-gavor-body {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .section--faqs .faq-dress-note {
    margin-top: 2px;
  }

  .section--faqs .dress-swatches {
    margin-top: 4px;
    gap: 7px;
  }

  .section--faqs .dress-swatch {
    width: 16px;
    height: 16px;
  }

  .section--toast {
    padding: 32px 16px 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    align-items: start;
  }

  .section--toast .section-header {
    grid-column: 1 / -1;
    order: 1;
  }

  .section--toast .toast-question {
    grid-column: 1 / -1;
    order: 2;
    font-size: 20px !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
  }

  .section--toast .toast-desc {
    grid-column: 1 / -1;
    order: 3;
    max-width: 38ch;
    margin-inline: auto;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .section--toast .toast-avatar {
    order: 4;
    width: 100% !important;
    max-width: 160px;
    justify-self: center;
  }

  .section--rsvp {
    position: relative;
    align-items: stretch;
    gap: 10px;
    padding: 32px 18px 38px;
  }

  .section--rsvp .rsvp-cloud {
    position: absolute !important;
    left: 50% !important;
    top: 14px !important;
    width: 140% !important;
    transform: translateX(-50%) !important;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
  }

  .section--rsvp > :not(.rsvp-cloud) {
    position: relative !important;
    z-index: 1;
  }

  .section--rsvp .rsvp-text {
    max-width: 39ch;
    margin-inline: auto;
    font-size: 15px !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .section--brudfolje {
    padding: 32px 14px 42px;
    display: grid;
    grid-template-columns: minmax(94px, 118px) max-content;
    gap: 12px 12px;
    align-items: center;
    justify-content: center;
  }

  .section--brudfolje .section-header {
    grid-column: 1 / -1;
  }

  .section--brudfolje .brud-ghost-label {
    display: none;
  }

  .section--brudfolje .brud-avatar {
    width: 100% !important;
    max-width: 118px;
    justify-self: center;
  }

  .section--brudfolje .brud-name {
    width: auto !important;
    max-width: none;
    justify-self: start;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .section--brudfolje .brud-avatar-1 { order: 2; }
  .section--brudfolje .brud-name-1 { order: 3; }
  .section--brudfolje .brud-avatar-2 { order: 4; }
  .section--brudfolje .brud-name-2 { order: 5; }
  .section--brudfolje .brud-avatar-3 { order: 6; }
  .section--brudfolje .brud-name-3 { order: 7; }
  .section--brudfolje .brud-avatar-4 { order: 8; }
  .section--brudfolje .brud-name-4 { order: 9; }
  .section--brudfolje .brud-avatar-5 { order: 10; }
  .section--brudfolje .brud-name-5 { order: 11; }
  .section--brudfolje .brud-avatar-6 { order: 12; }
  .section--brudfolje .brud-name-6 { order: 13; }

  .section--footer {
    padding: 28px 18px 42px;
    gap: 14px;
  }

  .section--footer .footer-ending {
    order: 1;
    width: min(100%, 330px) !important;
    aspect-ratio: 9 / 16;
    height: auto !important;
    margin: 0 auto 8px;
    align-self: center;
  }

  .section--footer .footer-logo {
    order: 2;
    width: 146px !important;
    aspect-ratio: 369 / 259;
    height: auto !important;
    margin: 6px auto 0;
  }

  .section--footer .footer-text {
    order: 1;
    max-width: 30ch;
    margin-inline: auto;
    font-size: 16px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }
}