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

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">

    @foreach($images as $image)

        <div class="group">

            <img
                src="{{ $image['src'] }}"
                alt="{{ $image['title'] }}"
                class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">

            <p class="mt-4 font-medium">

                {{ $image['title'] }}

            </p>

        </div>

    @endforeach

</div>