@media (max-width: 48rem) {
  .hero {
    padding-block: clamp(2.5rem, 8vh, 4rem);
  }

  .hero__kicker {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
  }
}

@media (max-width: 30rem) {
  .container {
    padding-inline: 1.1rem;
  }
}

@media (max-height: 34rem) {
  .hero {
    padding-block: 1.5rem;
  }

  .hero__kicker {
    margin-bottom: 0.4rem;
  }

  .hero__title {
    font-size: clamp(2.2rem, 9vh, 3rem);
  }

  .hero__subtitle {
    margin-top: 0.75rem;
    font-size: 1rem;
  }

  .hero__meta {
    margin-top: 1.25rem;
    font-size: 1rem;
  }
}