@php
    $bandPhotos = [
        ['seed' => 'yatra-band-1', 'alt' => 'Partner bus on a Kathmandu route'],
        ['seed' => 'yatra-band-2', 'alt' => 'Commuter tapping in at the bus door'],
        ['seed' => 'yatra-band-3', 'alt' => 'Recharge counter at New Baneshwor'],
        ['seed' => 'yatra-band-4', 'alt' => 'Evening commute across the valley'],
    ];
@endphp

<section class="bg-white py-16 dark:bg-ink">
    <div class="mx-auto max-w-7xl px-6">
        <div class="reveal grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($bandPhotos as $i => $photo)
                <div class="group overflow-hidden rounded-2xl shadow-sm" style="transition-delay: {{ $i * 80 }}ms">
                    <img src="https://picsum.photos/seed/{{ $photo['seed'] }}/400/500"
                         srcset="https://picsum.photos/seed/{{ $photo['seed'] }}/400/500 400w, https://picsum.photos/seed/{{ $photo['seed'] }}/800/1000 800w"
                         sizes="(min-width: 1024px) 25vw, 50vw"
                         alt="{{ $photo['alt'] }}"
                         width="400" height="500" loading="lazy"
                         class="aspect-[4/5] w-full object-cover transition duration-500 group-hover:scale-105">
                </div>
            @endforeach
        </div>
    </div>
</section>