@use 'sprucecss/scss/spruce' as *;

.hero {
  align-items: center;
  display: grid;
  gap: spacer-clamp('l', 'xl');

  @include breakpoint('lg') {
    grid-template-columns: 1.1fr 1fr;
  }

  &__content {
    @include layout-stack('m');
  }

  &__eyebrow {
    align-items: center;
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('pill');
    color: color('heading');
    display: inline-flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');
    padding: spacer('xxs') spacer('s') spacer('xxs') spacer('xxs');
  }

  &__badge {
    background-color: color('primary');
    border-radius: radius('pill');
    color: color('primary-foreground', 'btn');
    font-weight: 700;
    padding: 0 spacer('xs');
  }

  &__title {
    font-size: responsive-font-size(4rem, 40, '5vw + 1rem');
    letter-spacing: -0.02em;
  }

  &__lead {
    font-size: config('font-size-lead', $typography);
    max-inline-size: 38rem;
  }

  &__actions {
    @include layout-cluster('s');
  }

  &__note {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  &__media {
    img {
      aspect-ratio: 4 / 3;
      border-radius: radius('lg');
      box-shadow: shadow('xl');
      inline-size: 100%;
      object-fit: cover;
    }
  }
}

<section class="hero" aria-labelledby="hero-title">
    <div class="hero__content">
        <p class="hero__eyebrow"><span class="hero__badge">New</span> Spruce CSS 3.0 is out</p>
        <h1 class="hero__title" id="hero-title">Build the foundation once. Restyle it forever.</h1>
        <p class="hero__lead">A Sass-powered CSS framework with design tokens, dark mode and swappable design styles. One markup, many looks.</p>
        <div class="hero__actions">
            <a class="btn btn--primary btn--lg" href="#">Get started</a>
            <a class="btn btn--ghost-primary btn--lg" href="#">Read the docs</a>
        </div>
        <p class="hero__note">Free and open source · MIT license</p>
    </div>
    <div class="hero__media">
        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&amp;fit=crop&amp;w=1000&amp;q=70" alt="A laptop with code on the screen on a wooden desk." width="1000" height="667" fetchpriority="high">
    </div>
</section>