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

.promo-banners-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__list {
    display: grid;
    gap: spacer('m');
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
      padding-block: 0;
    }
  }

  &__banner {
    align-items: center;
    background-color: color('surface-muted');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    display: grid;
    gap: spacer('m');
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    overflow: hidden;

    &--brand {
      @include set-css-variable((
        --base-color-heading: color('primary-foreground', 'btn'),
        --base-color-muted: color-alpha('primary-foreground', 0.8, 'btn'),
        --base-color-text: color('primary-foreground', 'btn'),
      ));
      background-color: color('primary-background', 'btn');
      border-color: transparent;
      color: color('primary-foreground', 'btn');

      .promo-banners-block__action {
        background-color: color('primary-foreground', 'btn');
        border-color: color('primary-foreground', 'btn');
        color: color('primary-background', 'btn');

        &:hover {
          background-color: color-alpha('primary-foreground', 0.9, 'btn');
          color: color('primary-background', 'btn');
        }
      }
    }
  }

  &__content {
    padding: spacer-clamp('m', 'l');
    @include layout-stack('s');
  }

  &__eyebrow {
    color: color('primary');
    font-size: config('font-size-sm', $typography);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    .promo-banners-block__banner--brand & {
      color: inherit;
    }
  }

  &__title {
    font-size: font-size('h3');
  }

  &__text {
    color: color('muted');
  }

  &__action {
    background-color: color('heading');
    border-color: color('heading');
    color: color('background');

    &:hover {
      background-color: color('text');
      color: color('background');
    }
  }

  &__image {
    aspect-ratio: 1;
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}

<section class="promo-banners-block" aria-labelledby="promo-banners-title">
    <div class="container">
        <div class="promo-banners-block__inner">
            <h2 class="sr-only" id="promo-banners-title">Offers</h2>
            <ul class="promo-banners-block__list" role="list">
                <li class="promo-banners-block__banner">
                    <div class="promo-banners-block__content">
                        <p class="promo-banners-block__eyebrow">Gift guide</p>
                        <h3 class="promo-banners-block__title">Thoughtful gifts under $50</h3>
                        <p class="promo-banners-block__text">Hand-picked by our team, wrapped for free.</p>
                        <a class="btn btn--sm promo-banners-block__action" href="#">Shop gifts<span class="sr-only">: Thoughtful gifts under $50</span></a>
                    </div>
                    <img class="promo-banners-block__image" src="https://images.unsplash.com/photo-1513201099705-a9746e1e201f?auto=format&amp;fit=crop&amp;w=600&amp;q=70" alt="" width="600" height="600" loading="lazy">
                </li>
                <li class="promo-banners-block__banner promo-banners-block__banner--brand">
                    <div class="promo-banners-block__content">
                        <p class="promo-banners-block__eyebrow">Members</p>
                        <h3 class="promo-banners-block__title">10% off every order</h3>
                        <p class="promo-banners-block__text">Join for free and get early access to every sale.</p>
                        <a class="btn btn--sm promo-banners-block__action" href="#">Join now<span class="sr-only">: 10% off every order</span></a>
                    </div>
                    <img class="promo-banners-block__image" src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&amp;fit=crop&amp;w=600&amp;q=70" alt="" width="600" height="600" loading="lazy">
                </li>
            </ul>
        </div>
    </div>
</section>