/* .hero: the homepage's opening: eyebrow, the site title in Henrietta,
   the intro statement and the Tip ons button, beside an image slot. */
@layer components {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding-block: var(--space-8);
  }

  .hero__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-content: start;

    & h1 {
      font-size: var(--text-display-xl);
      line-height: var(--leading-display-xl);
    }
  }

  @media (min-width: 810px) {
    .hero {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: center;
      padding-block: var(--space-9);
    }
  }
}