.landing-main {
  --landing-hero-padding: clamp(2rem, 4vw, 3rem);
  --landing-section-image-width: clamp(11rem, 24vw, 15rem);
  --landing-section-min-width: 16rem;
  --landing-section-grid-gap: var(--space-lg);
  --landing-meta-size: var(--text-sm);

  gap: var(--space-2xl);
}

.landing-heroBody {
  padding: var(--landing-hero-padding);
}

.landing-heroTitle {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.landing-heroCopy {
  max-width: 36rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.landing-actions {
  justify-content: center;
}

.landing-storyBody {
  gap: var(--space-xl);
}

.landing-storyTitle {
  margin: 0;
  text-align: center;
}

.landing-storyLayout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--landing-section-grid-gap);
}

.landing-storyMedia,
.landing-storyCopy {
  flex: 1 1 var(--landing-section-min-width);
  min-width: 0;
}

.landing-storyMedia {
  display: flex;
  justify-content: center;
}

.landing-storyMedia img {
  width: min(100%, var(--landing-section-image-width));
  height: auto;
}

.landing-storyCopy {
  color: var(--muted);
}

.landing-storyCopy p,
.landing-storyCopy ul {
  margin: 0 0 var(--space-md);
}

.landing-storyCopy p:last-child,
.landing-storyCopy ul:last-child {
  margin-bottom: 0;
}

.landing-storyCopy ul {
  padding-left: 1.25rem;
}

.landing-storyFooter {
  justify-content: center;
}

.landing-languageSwitch {
  text-align: center;
  font-size: var(--landing-meta-size);
  color: var(--muted);
}

.landing-languageSwitch a {
  color: inherit;
  text-decoration: none;
}

.landing-languageSwitch a:hover,
.landing-languageSwitch a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

@media (width <= 50rem) {
  .landing-main {
    gap: var(--space-xl);
  }

  .landing-storyBody {
    gap: var(--space-lg);
  }

  .landing-storyLayout {
    gap: var(--space-md);
  }

  .landing-storyCopy {
    text-align: left;
  }
}
