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


<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16">
    @foreach ($services as $service)
        <div>
            <x-frontend.animation type="fade-up" delay="{{ $loop->index * 100 }}">
                <p class="mb-4">
                    <img src="{{ asset($service['img']) }}" alt="{{ $service['title'] }}" width="54" height="54">
                </p>
                <h3 class="mb-4 text-lg font-bold font-headline text-laurel lg:text-xl xl:text-2xl">
                    {{ $service['title'] }}
                </h3>
                <p>
                    {!! $service['description'] !!}
                </p>
            </x-frontend.animation>
        </div>
    @endforeach
</div>