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

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

.feature {
  $this: &;

  align-items: center;
  display: grid;
  gap: spacer('l') spacer('xl');
  grid-template-columns: minmax(0, 1fr);

  &--start {
    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
  }

  &--end {
    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);

      #{$this}__thumbnail {
        order: 1;
      }
    }
  }

  &__thumbnail {
    aspect-ratio: 6 / 4.5;
    border-radius: config('border-radius-lg', $display);
  }

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

  &__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="https://ui.sprucecss.com/img/post/cover/boxed-water-is-better-3iiyde9Zj8A-unsplash.jpg" alt="" />
                <div class="feature__caption">
                    <h2 class="feature__title">Better than water</h2>
                    <p class="lead">Two driven jocks help fax my big quiz.</p>
                    <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--secondary btn--lg feature__btn" href="#">
                        Learn more
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <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="https://ui.sprucecss.com/img/post/cover/mahbod-akhzami-xW7L8MnnBdA-unsplash.jpg" alt="" />
                <div class="feature__caption">
                    <h2 class="feature__title">Fresh as always</h2>
                    <p class="lead">A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box.</p>
                    <p>A wizard’s job is to vex chumps quickly in fog. Watch &quot;Jeopardy!&quot;, Alex Trebek&#39;s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just.</p>
                    <a class="btn btn--secondary btn--lg feature__btn" href="#">
                        Learn more
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <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>