<section class="container hero accent-primary">
  <div class="hero__content">
    <div class="hero__text">
      <h1>This is the default hero.</h1>
      <p>It has no padding by default to let the image go all the way to the edges.</p>
      <div class="actions">
        <a class="button accent-white" href="#">Learn More</a>
        <a class="button -outline-fill accent-white" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</div>
</section>

<section class="container hero -padded accent-secondary">
  <div class="hero__content">
    <div class="hero__text">
      <h1>This version is -padded, and it uses .accent-secondary without any text below it.</h1>
      <div class="actions">
        <a class="button -ghost accent-white" href="#">Learn More</a>
        <a class="button accent-primary" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 1"></div>
    </div>
  </div>
</section>

<section class="container hero -bleed accent-tertiary">
  <div class="hero__content">
    <div class="hero__text">
      <h1>Lastly, this hero the image bleeding to the right edge.</h1>
      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
      <div class="actions">
        <a class="button accent-black -outline" href="#">Learn More</a>
        <a class="button accent-primary" href="#">Buy Now</a>
      </div>
    </div>
    <div class="hero__image">
      <div class="placeholder accent-white" style="aspect-ratio: 634 / 368"></div>
    </div>
  </div>
</section>

<section class="container hero -center accent-primary">
  <div class="hero__content">
    <div class="hero__text">
      <h1>And this one has no image at all; just a bunch of really big text.</h1>
      <p>Mauris euismod sit amet dolor vel vehicula. Nulla lacinia augue sem, accumsan luctus nunc facilisis Duis ex libero, auctor a semper in, condimentum sit amet enim. Vestibulum et consectetur arcu. <a href="#">Nam nunc justo,</a> varius id metus eu praesent dictum sit amet quam efficitur placerat. </p>
      <div class="actions">
        <a class="button -outline-fill accent-white" href="#">Learn More</a>
        <a class="button -ghost accent-white" href="#">Buy Now</a>
      </div>
    </div>
  </div>
</section>

@use "@imarc/pronto/resources/styles/imported" as *;

.hero {
  $b: &;

  background: var(--accent-color);
  color: var(--accent-color-contrast);

  &__content {
    display: grid;
    grid: auto / subgrid;
    gap: 1rem var(--root-gap);
    align-items: center;

    > :first-child:last-child {
      grid-column: 1 / -1;
    }
  }


  // Natural content order for mobile
  &__image {
    order: 1;
  }
  &__testimonial {
    order: 2;
  }
  &__media {
    order: 3;
  }
  &__text {
    order: 4;
    padding: 2rem 0;
  }
  &__cta {
    order: 5;
  }

  &__text,
  &__image,
  &__media,
  &__cta,
  &__testimonial {
    @include at(md) {
      order: unset;
      grid-column: span var(--span, 1);
    }
  }

  @include at(md) {
    --columns: 2;
  }

  &.-padded {
    padding: 5rem 0;

    #{$b}__text {
      padding: 0;
    }
  }

  &.-bleed {
    #{$b}__content {
      grid-column: main / wide;

      > :nth-child(2) {
        grid-column: span 2;
      }
    }
  }

  &.-center {
    #{$b}__content {
      justify-items: center;
      text-align: center;
    }
    #{$b}__text {
      padding: 4rem 0;
      max-width: fluid-rems(40, 50);
      justify-items: center;
    }
  }
}