@props([
    'title',
    'items',
    'footer' => null,
    'highlight' => null,
])
@php
    use App\Support\Highlight;
@endphp
<section class="atlas-gap" aria-labelledby="atlas-gap-title">
    <div class="atlas-gap__inner">
        <p class="atlas-kicker">The reality</p>
        <h2 id="atlas-gap-title" class="atlas-display atlas-gap__title">
            {!! Highlight::word($title, $highlight) !!}
        </h2>

        <div class="atlas-gap__strip">
            @foreach($items as $item)
                <div class="atlas-gap__cell">
                    <span class="atlas-gap__num">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    <p>{{ $item['text'] ?? '' }}</p>
                </div>
            @endforeach
        </div>

        @if($footer)
            <p class="atlas-gap__close">{{ $footer }}</p>
        @endif
    </div>
</section>