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

.before-after-block {
  padding-block: spacer-clamp('xl', 'xxl');

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

    @include breakpoint('lg') {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
  }

  &__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: spacer('l');
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    @include layout-stack('m');
  }

  &__item {
    display: flex;
    gap: spacer('s');
  }

  &__icon {
    align-items: center;
    background-color: color-alpha('primary', 0.12);
    block-size: 2.5rem;
    border-radius: radius('md');
    color: color('primary');
    display: flex;
    flex-shrink: 0;
    inline-size: 2.5rem;
    justify-content: center;

    .block-icon {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }

  &__body {
    @include layout-stack('xxs'); // title, text
  }

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

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

  &__compare {
    // The figure is a grid child; no browser margin.
    .image-compare {
      margin: 0;
    }
  }
}

<section class="before-after-block" aria-labelledby="before-after-title">
    <div class="container">
        <div class="before-after-block__inner">
            <div class="before-after-block__content">
                <header class="block-heading block-heading--start">
                    <p class="block-heading__eyebrow">Auto color</p>
                    <h2 class="block-heading__title" id="before-after-title">From flat to finished in one click</h2>
                    <p class="block-heading__text">The color engine reads the light of every photo and grades it like a pro would.</p>
                </header>
                <ul class="before-after-block__list" role="list">
                    <li class="before-after-block__item">
                        <span class="before-after-block__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 3 9.5 9.5 3 12l6.5 2.5L12 21l2.5-6.5L21 12l-6.5-2.5L12 3z"/>
</svg>
</span>
                        <div class="before-after-block__body">
                            <h3 class="before-after-block__title">Smart color grading</h3>
                            <p class="before-after-block__text">Natural skin tones and skies, without the oversaturated look.</p>
                        </div>
                    </li>
                    <li class="before-after-block__item">
                        <span class="before-after-block__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/>
</svg>
</span>
                        <div class="before-after-block__body">
                            <h3 class="before-after-block__title">Non-destructive</h3>
                            <p class="before-after-block__text">Every edit is a layer: compare, tweak or undo it anytime.</p>
                        </div>
                    </li>
                    <li class="before-after-block__item">
                        <span class="before-after-block__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</span>
                        <div class="before-after-block__body">
                            <h3 class="before-after-block__title">Batch in seconds</h3>
                            <p class="before-after-block__text">Apply one look to a whole shoot of 500 photos at once.</p>
                        </div>
                    </li>
                </ul>
                <a class="btn btn--primary btn--lg" href="#">Try it on your photos</a>
            </div>
            <div class="before-after-block__compare">
                <figure class="image-compare" style="--position: 50%;" data-image-compare>
                    <div class="image-compare__frame">
                        <img class="image-compare__image" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&amp;fit=crop&amp;w=1200&amp;q=70&amp;sat=-100" alt="The mountains in black and white (before)." width="1200" height="800">
                        <img class="image-compare__image image-compare__image--after" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&amp;fit=crop&amp;w=1200&amp;q=70" alt="The mountains in color (after)." width="1200" height="800">
                        <span class="image-compare__handle" aria-hidden="true"></span>
                        <span class="image-compare__tag image-compare__tag--before" aria-hidden="true">Before</span>
                        <span class="image-compare__tag image-compare__tag--after" aria-hidden="true">After</span>
                    </div>
                    <label class="sr-only" for="image-compare-range">Comparison position</label>
                    <input class="image-compare__range" id="image-compare-range" type="range" min="0" max="100" value="50" data-image-compare-range>
                    <figcaption class="image-compare__caption">Drag the handle (or use the arrow keys) to compare the photos.</figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>