@props([
    'title' => '',
    'images' => null,
])

@if ($title)
    <x-frontend.section.title :title="$title" center class="my-8 lg:my-16" />
@endif

@if ($images)
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3">
        @foreach ($images as $image)
            <x-frontend.animation delay="{{ (($loop->index % 3) + 1) * 100 }}">
                <a class="block overflow-hidden transition-all duration-300 ease-out shadow-lg glightbox rounded-3xl hover:scale-105"
                    data-gallery="gallery" data-glightbox="description: {{ $image['alt_text'] }}"
                    href="{{ $image['img'] }}">
                    <img src="{{ asset($image['img']) }}" alt="{{ $image['alt_text'] }}" />
                </a>
            </x-frontend.animation>
        @endforeach
    </div>
@endif