/* ==========================================================================
   LUFLY - HERO CINEMA "Living Monolith" (Ultra-Optimized)
   GPU-accelerated WebP showcase with zero jank, zero ticker overhead,
   responsive typography, and seamless theme integration.
   ========================================================================== */

.lfc {
  --lfc-teal: var(--ds-primary, #1c8b8b);
  --lfc-teal-hi: #5fd4d4;
  --lfc-ink: #e9e6de;
  --lfc-ease: cubic-bezier(.19, 1, .22, 1);
  --lfc-dur: 6500ms;

  /* Fill the first screen exactly: small viewport minus the announcement bar
     (--luann-h) and the navbar slab (--mnav-row1). Pure CSS fallback - the
     script then measures the same space and pins the height in px. */
  height: calc(100vh - var(--luann-h, 0px) - var(--mnav-row1, 64px));
  height: calc(100svh - var(--luann-h, 0px) - var(--mnav-row1, 64px));
  min-height: 480px;
  min-height: min(480px, 78svh);
  overflow: hidden;
  background: var(--lu-ink-900, #2c2b28);
  color: var(--lfc-ink);
  font-family: var(--font-body, "Inter", "Segoe UI", system-ui, sans-serif);
  isolation: isolate;
  contain: layout paint;
}

/* Phone: the JS measures precisely, but default to a shorter hero so there
   is no full-viewport flash before the script runs. */
/* Landscape phones: the hero takes the whole first screen (the copy is short
   there - the max-height rule at the bottom hides the sub line), so the
   pre-script height must not be the portrait 80%. */
@media (max-width: 760px) and (orientation: landscape) {
  /* the landscape screen is short: give it the whole viewport instead of the
     portrait 80% - but subtract the navbar as well as the announcement bar,
     otherwise the fallback hero is 56px taller than the space it has and the
     first screen ends up showing a slice of the next section. */
  .lfc { height: calc(100svh - var(--luann-h, 0px) - var(--mnav-row1, 56px)); }
}

@media (max-width: 760px) {
  .lfc {
    /* the script pins the exact height; this is the pre-script fallback and
       the same screen the script measures - below the announcement bar and
       the navbar, never taller than what is left */
    height: calc(100svh - var(--luann-h, 0px) - var(--mnav-row1, 56px));
    min-height: 320px;
    min-height: min(320px, 58svh);
  }
}

/* ---------- 1. scenes ---------- */

.lfc-scenes {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.lfc-scene {
  position: absolute;
  /* the bleed hides the parallax edges */
  inset: -3.5%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}
.lfc-scene.is-on { opacity: 1; }

.lfc-scene.is-on.kb1 { animation: lfcKb1 8s ease-out forwards; }
.lfc-scene.is-on.kb2 { animation: lfcKb2 8s ease-out forwards; }
.lfc-scene.is-on.kb3 { animation: lfcKb3 8s ease-out forwards; }
.lfc-scene.is-on.kb4 { animation: lfcKb4 8s ease-out forwards; }

@keyframes lfcKb1 { from { transform: scale(1.03) translate3d(0, 0, 0); }     to { transform: scale(1.11) translate3d(-1%, -0.7%, 0); } }
@keyframes lfcKb2 { from { transform: scale(1.11) translate3d(0, 0, 0); }     to { transform: scale(1.03) translate3d(0.8%, 0.6%, 0); } }
@keyframes lfcKb3 { from { transform: scale(1.07) translate3d(-1.2%, 0, 0); } to { transform: scale(1.07) translate3d(1.2%, 0.4%, 0); } }
@keyframes lfcKb4 { from { transform: scale(1.02) translate3d(0.5%, 0.8%, 0); } to { transform: scale(1.10) translate3d(-0.5%, -0.5%, 0); } }

/* Cap the bleed on browsers that can do it: an uncapped percentage turns
   into hundreds of px on a tall hero, and the extra box scales the cover
   artwork (and its crop) right up with it. */
@supports (inset: min(1px, 2px)) {
  .lfc-scene { inset: calc(min(3.5%, 44px) * -1); }
}

/* ---------- 2. shade & atmosphere ---------- */

.lfc-shade {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg, rgba(14, 20, 20, 0.82) 0%, rgba(14, 20, 20, 0.40) 46%, rgba(14, 20, 20, 0) 74%),
    linear-gradient(0deg, rgba(14, 20, 20, 0.76) 0%, rgba(14, 20, 20, 0) 42%);
}
[dir="rtl"] .lfc-shade {
  background:
    linear-gradient(270deg, rgba(14, 20, 20, 0.82) 0%, rgba(14, 20, 20, 0.40) 46%, rgba(14, 20, 20, 0) 74%),
    linear-gradient(0deg, rgba(14, 20, 20, 0.76) 0%, rgba(14, 20, 20, 0) 42%);
}

.lfc-atmo { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* Light theme: the hero swaps to high-key daylight photos (handled in JS),
   so the scrim softens to let the brightness breathe while the light ink
   text keeps its contrast. */
[data-theme="light"] .lfc-shade {
  background:
    linear-gradient(90deg, rgba(18, 22, 22, 0.62) 0%, rgba(18, 22, 22, 0.30) 46%, rgba(18, 22, 22, 0) 74%),
    linear-gradient(0deg, rgba(18, 22, 22, 0.55) 0%, rgba(18, 22, 22, 0) 42%);
}
[data-theme="light"] .lfc-vignette {
  background: radial-gradient(120% 100% at 50% 45%, transparent 62%, rgba(40, 46, 46, 0.35) 100%);
}

.lfc-glow {
  position: absolute; top: -25%; right: -15%; width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(28, 139, 139, 0.14) 0%, transparent 65%);
  animation: lfcBreathe 10s ease-in-out infinite;
  transform: translate3d(0, 0, 0);
}
@keyframes lfcBreathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.08); } }

.lfc-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 58%, rgba(10, 15, 15, 0.55) 100%);
}

.lfc-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}

.lfc-beam {
  position: absolute; top: -20%; bottom: -20%; left: -30%; width: 32%;
  background: linear-gradient(100deg, transparent, rgba(190, 240, 240, 0.05), transparent);
  transform: skewX(-12deg);
  animation: lfcBeam 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lfcBeam { 0% { left: -35%; } 36% { left: 130%; } 100% { left: 130%; } }

/* ---------- 3. copy panels ---------- */

.lfc-stage {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.lfc-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 clamp(24px, 7.5vw, 130px);
  padding-top: clamp(16px, 4vh, 48px);
  padding-bottom: clamp(24px, 5vh, 56px);
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.lfc-panel.is-on {
  opacity: 1; visibility: visible;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  transition: opacity 0.5s ease 0.06s, transform 0.5s ease 0.06s, visibility 0s;
}
.lfc-inner { max-width: 680px; pointer-events: auto; }

/* entrance animations */
.lfc-panel.is-on .lfc-kicker { animation: lfcKicker 0.85s var(--lfc-ease) 0.12s both; }
.lfc-panel.is-on .lfc-line > span { animation: lfcLine 0.95s var(--lfc-ease) both; }
.lfc-panel.is-on .lfc-line:nth-child(1) > span { animation-delay: 0.24s; }
.lfc-panel.is-on .lfc-line:nth-child(2) > span { animation-delay: 0.38s; }
.lfc-panel.is-on .lfc-rule { animation: lfcRule 0.85s var(--lfc-ease) 0.58s both; }
.lfc-panel.is-on .lfc-sub { animation: lfcUp 0.85s var(--lfc-ease) 0.72s both; }
.lfc-panel.is-on .lfc-ctas { animation: lfcUp 0.85s var(--lfc-ease) 0.84s both; }

.lfc-kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(10.5px, 1.1vw, 13px);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.38em; color: var(--lfc-teal-hi);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.lfc-kicker::before { content: ""; width: 34px; height: 1.5px; background: var(--lfc-teal); flex: none; }
[dir="rtl"] .lfc-kicker { letter-spacing: 0.12em; }
@keyframes lfcKicker {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.lfc-title {
  margin: 0;
  font-size: clamp(34px, 5.8vw, 80px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
  color: #ffffff;
}
.lfc-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lfc-line > span { display: inline-block; will-change: transform; }
@keyframes lfcLine {
  from { transform: translate3d(0, 110%, 0) skewY(2deg); }
  to { transform: translate3d(0, 0, 0); }
}

.lfc-rule {
  width: 70px; height: 2.5px; background: var(--lfc-teal);
  margin: clamp(16px, 2.6vh, 26px) 0 clamp(14px, 2.2vh, 20px);
  transform-origin: left;
}
[dir="rtl"] .lfc-rule { transform-origin: right; }
@keyframes lfcRule { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.lfc-sub {
  margin: 0; max-width: 52ch;
  font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.72;
  color: rgba(240, 248, 248, 0.88);
}
@keyframes lfcUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- 4. CTAs ---------- */

.lfc-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 3.2vh, 32px); }

.lfc-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--lfc-ease), box-shadow 0.25s, background 0.2s, color 0.2s, border-color 0.2s;
}
[dir="rtl"] .lfc-cta { letter-spacing: 0.06em; }
.lfc-cta--p { background: var(--lfc-teal); color: #ffffff; box-shadow: 0 8px 24px rgba(28, 139, 139, 0.32); }
.lfc-cta--p:hover { background: var(--ds-primary-hover, #147174); transform: translate3d(0, -2px, 0); box-shadow: 0 12px 30px rgba(28, 139, 139, 0.45); }
.lfc-cta--s { border: 1px solid rgba(240, 248, 248, 0.32); color: var(--lfc-ink); background: rgba(18, 30, 30, 0.25); }
.lfc-cta--s:hover { border-color: var(--lfc-teal-hi); color: var(--lfc-teal-hi); background: rgba(28, 139, 139, 0.16); transform: translate3d(0, -2px, 0); }
.lfc-btn-icon { flex-shrink: 0; }

/* ---------- 5. brand (logo) slide ---------- */

.lfc-logoBox { position: relative; width: min(430px, 60vw); margin: 4px 0 clamp(18px, 3vh, 28px); }

.lfc-corner { position: absolute; width: 24px; height: 24px; border: 0 solid var(--lfc-teal); opacity: 0; }
.lfc-panel.is-on .lfc-corner.tl { top: -14px; left: -16px; border-top-width: 2px; border-left-width: 2px; transform-origin: top left; animation: lfcCorner 0.65s var(--lfc-ease) 0.16s both; }
.lfc-panel.is-on .lfc-corner.tr { top: -14px; right: -16px; border-top-width: 2px; border-right-width: 2px; transform-origin: top right; animation: lfcCorner 0.65s var(--lfc-ease) 0.26s both; }
.lfc-panel.is-on .lfc-corner.bl { bottom: -14px; left: -16px; border-bottom-width: 2px; border-left-width: 2px; transform-origin: bottom left; animation: lfcCorner 0.65s var(--lfc-ease) 0.36s both; }
.lfc-panel.is-on .lfc-corner.br { bottom: -14px; right: -16px; border-bottom-width: 2px; border-right-width: 2px; transform-origin: bottom right; animation: lfcCorner 0.65s var(--lfc-ease) 0.46s both; }
@keyframes lfcCorner { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.95; transform: scale(1); } }

.lfc-logoMask { clip-path: inset(0 100% 0 0); }
.lfc-panel.is-on .lfc-logoMask { animation: lfcReveal 1.05s cubic-bezier(.65, 0, .35, 1) 0.42s forwards; }
@keyframes lfcReveal { to { clip-path: inset(0 0 0 0); } }
.lfc-logoImg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 24px rgba(28, 139, 139, 0.38)); }

.lfc-scan {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 3px; opacity: 0;
  background: linear-gradient(rgba(127, 227, 227, 0), #8ff0f0, rgba(127, 227, 227, 0));
  box-shadow: 0 0 20px 3px rgba(95, 212, 212, 0.5);
}
.lfc-panel.is-on .lfc-scan { animation: lfcScan 1.05s cubic-bezier(.65, 0, .35, 1) 0.42s forwards; }
@keyframes lfcScan { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.lfc-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%);
  background-size: 280% 100%;
  background-position: 230% 0;
  opacity: 0;
}
.lfc-panel.is-on .lfc-shine { animation: lfcShine 8s ease-in-out 1.8s infinite; opacity: 1; }
@keyframes lfcShine { 0% { background-position: 230% 0; } 26% { background-position: -130% 0; } 100% { background-position: -130% 0; } }

.lfc-tag {
  font-size: clamp(10.5px, 1.05vw, 13px); font-weight: 600;
  letter-spacing: 0.45em; text-transform: uppercase;
  color: rgba(215, 240, 240, 0.9);
  margin-bottom: clamp(14px, 2.4vh, 22px);
}
[dir="rtl"] .lfc-tag { letter-spacing: 0.12em; }
.lfc-panel.is-on .lfc-tag { animation: lfcKicker 0.95s var(--lfc-ease) 1.4s both; }

/* ---------- 6. progress ticks ---------- */

.lfc-progress {
  position: absolute; z-index: 12;
  inset-inline-end: clamp(16px, 3.4vw, 46px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px;
}
.lfc-tick {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 3px 0; cursor: pointer;
}
.lfc-num { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: rgba(230, 244, 244, 0.45); transition: color 0.25s; }
.lfc-bar { width: 2px; height: 36px; background: rgba(230, 244, 244, 0.18); overflow: hidden; position: relative; }
.lfc-bar > i { position: absolute; inset: 0; background: var(--lfc-teal-hi); transform: scaleY(0); transform-origin: top; display: block; }
.lfc-tick.act .lfc-num { color: #ffffff; }
.lfc-tick.act .lfc-bar > i { animation: lfcFill var(--lfc-dur) linear forwards; }
.lfc-tick:hover .lfc-num { color: var(--lfc-teal-hi); }
@keyframes lfcFill { to { transform: scaleY(1); } }

/* ---------- 7. arrows ---------- */

.lfc-arrows {
  position: absolute; z-index: 12;
  inset-inline-end: clamp(20px, 3.6vw, 52px);
  bottom: clamp(24px, 4vh, 48px);
  display: flex; gap: 10px;
}
.lfc-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(240, 248, 248, 0.28);
  background: rgba(14, 22, 22, 0.55);
  color: rgba(240, 248, 248, 0.92); font-size: 13px; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.25s var(--lfc-ease);
}
.lfc-arrow:hover { border-color: var(--lfc-teal-hi); color: var(--lfc-teal-hi); background: rgba(28, 139, 139, 0.25); transform: translate3d(0, -2px, 0); }
.lfc-arrow svg { display: block; }

/* ---------- 8. reduced motion & responsive ---------- */

.lfc-reduced .lfc-scene.is-on,
.lfc-reduced .lfc-beam,
.lfc-reduced .lfc-glow,
.lfc-reduced .lfc-grain { animation: none !important; }
.lfc-reduced .lfc-panel.is-on * { animation-duration: 0.01s !important; animation-delay: 0s !important; }

/* Phone: the box is portrait while the artwork is landscape, so `cover`
   already crops hard. Keep the drift, drop the extra zoom. */
@media (max-width: 760px) {
  .lfc-scene.is-on.kb1 { animation-name: lfcKbM1; }
  .lfc-scene.is-on.kb2 { animation-name: lfcKbM2; }
  .lfc-scene.is-on.kb3 { animation-name: lfcKbM3; }
  .lfc-scene.is-on.kb4 { animation-name: lfcKbM4; }
}

@keyframes lfcKbM1 { from { transform: scale(1.005) translate3d(0, 0, 0); }      to { transform: scale(1.035) translate3d(-1%, -0.7%, 0); } }
@keyframes lfcKbM2 { from { transform: scale(1.035) translate3d(0, 0, 0); }      to { transform: scale(1.005) translate3d(0.8%, 0.6%, 0); } }
@keyframes lfcKbM3 { from { transform: scale(1.02) translate3d(-1.2%, 0, 0); }   to { transform: scale(1.02) translate3d(1.2%, 0.4%, 0); } }
@keyframes lfcKbM4 { from { transform: scale(1.005) translate3d(0.5%, 0.8%, 0); } to { transform: scale(1.03) translate3d(-0.5%, -0.5%, 0); } }

@media (max-width: 760px) {
  .lfc-progress { display: none; }
  .lfc-arrows { inset-inline-end: 14px; bottom: 16px; }
  .lfc-arrow { width: 38px; height: 38px; font-size: 12px; }
  .lfc-inner { max-width: 100%; }
  .lfc-beam { display: none; }

  /* phone type scale: the copy gets the lower part of the hero, so the
     display size has to work at that width instead of the desktop clamp */
  /* every rule below is scoped to the hero (`.lfc `) so the later generic
     phone block cannot undo it on source order alone */
  .lfc .lfc-kicker { margin-bottom: 8px; }
  .lfc .lfc-logoBox { width: min(190px, 46vw); margin: 0 0 8px; }
  .lfc .lfc-tag { display: none; }
  .lfc .lfc-title { font-size: clamp(27px, 8.4vw, 44px); }
  .lfc .lfc-rule { display: none; }
  .lfc .lfc-sub {
    font-size: 13.5px;
    line-height: 1.62;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
  }
  .lfc .lfc-ctas { margin-top: 12px; gap: 8px; }
  .lfc .lfc-cta { padding: 12px 20px; }

  /* copy stays vertically centered; extra bottom padding clears the arrows */
  .lfc-panel {
    padding-inline: 24px;
    padding-top: 28px;
    padding-bottom: 92px;
  }

  /* soften: calmer contrast + gentler type rhythm */
  .lfc-shade,
  [dir="rtl"] .lfc-shade {
    background: linear-gradient(180deg,
      rgba(15, 18, 17, 0.52) 0%,
      rgba(15, 18, 17, 0.30) 42%,
      rgba(15, 18, 17, 0.62) 100%);
  }
  .lfc-kicker { font-size: 10px; letter-spacing: 0.22em; margin-bottom: 16px; }
  [dir="rtl"] .lfc-kicker { letter-spacing: 0.1em; }
  .lfc-title { font-size: clamp(30px, 9vw, 44px); line-height: 1.04; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.38); }
  .lfc-rule { margin: 16px 0 14px; }
  .lfc-sub { font-size: 13.5px; line-height: 1.7; max-width: 34ch; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
  .lfc-ctas { gap: 10px; margin-top: 24px; }
  .lfc-cta { padding: 13px 20px; font-size: 11px; letter-spacing: 0.12em; }
  .lfc-logoBox { width: min(280px, 70vw); margin-bottom: 22px; }
  .lfc-tag { letter-spacing: 0.3em; }
  [dir="rtl"] .lfc-tag { letter-spacing: 0.08em; }
  .lfc-grain { background-size: 32px 32px; }
}

/* Compact screens: a 568px-tall phone cannot hold the desktop rhythm, so the
   panel tightens (smaller gaps and buttons, smaller logo) instead of pushing
   the CTAs out of the hero. Declared after the phone block on purpose - it has
   to win over it. */
@media (max-height: 700px) {
  .lfc-panel { padding-top: 16px; padding-bottom: 72px; }
  .lfc-kicker { margin-bottom: 12px; }
  .lfc-title { font-size: clamp(28px, min(9vw, 7vh), 44px); }
  .lfc-rule { margin: 12px 0 10px; }
  .lfc-sub { font-size: 13px; line-height: 1.6; }
  .lfc-ctas { margin-top: 18px; gap: 10px; }
  .lfc-cta { padding: 11px 20px; }
  .lfc-logoBox { width: min(300px, 52vw); margin-bottom: 14px; }
  .lfc-tag { margin-bottom: 12px; }
}

/* Very short (landscape phones): drop the paragraph and the strapline so the
   two CTAs always stay visible inside the first screen. */
@media (max-height: 640px) {
  .lfc-sub { display: none; }
}

/* very narrow phones (Galaxy Fold closed, 280px): the paragraph costs more
   room than it returns - the title and the CTAs carry the slide */
@media (max-width: 340px) {
  .lfc-sub { display: none; }
  .lfc-cta { padding: 11px 16px; font-size: 11px; }
}

/* short screens (landscape phones, small laptops) stay on one screen.
   The hero clips its overflow, so whatever does not fit simply disappears off
   the panel - and the CTAs sit at the bottom. Everything decorative goes, the
   brand box and the type get smaller, and the two CTAs shrink so the row still
   fits: on a 568x320 phone that is ~176px of copy inside a 224px panel. */
@media (max-height: 560px) {
  .lfc { min-height: 200px; }
  .lfc-panel { padding-top: 8px; padding-bottom: 56px; }
  .lfc-title { font-size: clamp(24px, 7vh, 36px); }
  .lfc-kicker, .lfc-tag, .lfc-rule { display: none; }
  .lfc-sub { display: none; }
  .lfc-ctas { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
  .lfc-cta { padding: 9px 16px; font-size: 11px; }
  .lfc-logoBox { width: min(190px, 32vh); margin-bottom: 12px; }
}