@if ($block->image && $block->image_secondary)
    <section class="section-tight">
        <div class="container-page max-w-4xl">
            @if ($block->heading)
                <h2 class="mb-3 font-display text-headline font-bold text-text" data-reveal>{{ $block->heading }}</h2>
            @endif

            @if ($block->subheading)
                <p class="prose-measure mb-8 text-text-secondary" data-reveal>{{ $block->subheading }}</p>
            @endif

            <x-compare-slider :before="$block->image"
                              :after="$block->image_secondary"
                              :before-label="$block->setting('before_label')"
                              :after-label="$block->setting('after_label')"
                              :alt="$block->heading ?: __('Before and after comparison')"
                              data-reveal />
        </div>
    </section>
@endif