/* Hero: headline column beside a framed illustration, stacking on narrow screens. */

.hero {
  padding-block: var(--space-8) var(--space-7);
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: var(--space-7);
}

.hero__content {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.hero h1 em {
  font-style: normal;
  color: var(--primary);
}

.hero__lede {
  max-width: 52ch;
  color: var(--muted-foreground);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__media {
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-md);
}

@media (min-width: 48rem) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
  }

  .hero__media {
    aspect-ratio: 5 / 4;
  }
}