/*
CSS variables available:
  --hero-accent-color (changes the color of the CTA)
  --hero-header-to-image-ratio (in fr, changes ratio of header to image)
*/

@layer modules {
  #hero {
    h1 {
      max-width: 40rem;
      margin: 0;
      font-size: clamp(2rem, 2.4vw + 1.3rem, 3.2rem);
    }
    header {
      display: grid;
      grid: auto auto 1fr / var(--hero-header-to-image-ratio, .75fr) 1fr;
      place-items: start;
      gap: 2rem 4rem;
      padding: 4rem 0 0;
    }
    :is(img, svg) {
      grid-area: 1 / -2 / -1 / -1;
      width: 100%;
      height: auto;
    }
    p {
      max-width: 40rem;
      margin: 0 0 2rem 0;
      font-size: clamp(1rem, .4vw + .88rem, 1.2rem);
    }
    nav {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem 2rem;
      margin: 0 0 2rem;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: .01em;
      white-space: nowrap;
    }
    a.primary {
      padding: 1.25rem 1.75rem;
      color: white;
      background-color: var(--hero-accent-color, black);
      border-radius: .4rem;
      text-decoration: none;
      transition: opacity .2s;
      &:hover { opacity: .8; }
    }
    a.secondary {
      padding: .5rem .75rem;
      color: var(--hero-accent-color, black);
      text-decoration: underline transparent;
      text-decoration-thickness: 3px;
      text-underline-offset: .8rem;
      transition: text-decoration-color .2s;
      &:hover { text-decoration-color: currentcolor; }
    }

    @media (width < 1000px){
      header {
        grid-template: auto / 1fr;
        text-align: center;
        justify-items: center;
        gap: 2rem;
      }
      nav { justify-content: center; }
      :is(img, svg) { grid-area: auto; }
    }
  }
}