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

.l-feature {
  &__inner {
    @include layout-stack(spacer-clamp('xl', 'xxl'));

    @include breakpoint('md') {
      > * + * {
        margin-block-start: 0;
      }
    }
  }
}

.feature {
  $this: &;
  --column: 1;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(var(--column), minmax(0, 1fr));
  row-gap: spacer('m');

  @include breakpoint('md') {
    --column: 2;
  }

  &--start {
    @include breakpoint('md') {
      #{$this}__caption {
        padding-inline-start: spacer-clamp('l', 'xl');
      }
    }
  }

  &--end {
    @include breakpoint('md') {
      #{$this}__thumbnail {
        order: 1;
      }

      #{$this}__caption {
        padding-inline-end: spacer-clamp('l', 'xl');
      }
    }
  }

  &__thumbnail {
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  &__caption {
    @include layout-stack('s');

    @include breakpoint('md') {
      padding-block: spacer-clamp('xl', 8rem, 7.5vw);
    }
  }

  &__subtitle {
    align-items: center;
    background-color: color('subtitle-background', 'feature');
    border: 1px solid color('subtitle-border', 'feature');
    border-radius: config('border-radius-lg', $display);
    color: color('primary');
    display: inline-flex;
    font-size: 0.9375rem;
    gap: 0.65rem;
    padding: 0.15em spacer('s');
    text-align: start;
  }

  &__title {
    font-size: responsive-font-size(3rem, 25, '4vw + 1rem');
  }

  &__btn {
    margin-block-start: spacer('m');
  }
}

<div class="l-feature">
    <div class="container">
        <div class="l-feature__inner">
            <div class="feature feature--start">
                <img class="feature__thumbnail" src="/img/blog/why-you-should-choose-eleventy-as-your-static-site-generator.png" alt=""/>
                <div class="feature__caption">
                    <p class="feature__subtitle">Two driven jocks help</p>
                    <h2 class="feature__title">Better than water</h2>
                    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>
                    <a class="btn btn--primary feature__btn" href="#">
                        Learn more
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="feature feature--end">
                <img class="feature__thumbnail" src="/img/blog/the-different-types-of-css-frameworks.png" alt=""/>
                <div class="feature__caption">
                    <p class="feature__subtitle">A very bad quack might</p>
                    <h2 class="feature__title">Fresh as always</h2>
                    <p>A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just.</p>
                    <a class="btn btn--primary feature__btn" href="#">
                        Learn more
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                            <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>