<section class="w-full py-16 sm:py-24 overflow-x-hidden" style="background-color: {{ trim($d['bg_color'] ?? '') ?: '#ffffff' }}">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 min-w-0">
        @if(!empty($d['title']))
            <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
        @endif
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
            @foreach($d['items'] ?? [] as $item)
                @if(!empty($item['image']))
                    @php $imgUrl = str_starts_with($item['image'], 'http') || str_starts_with($item['image'], '/') ? $item['image'] : asset('storage/'.$item['image']); @endphp
                    <figure class="group overflow-hidden rounded-2xl aspect-square">
                        <img src="{{ $imgUrl }}" alt="{{ $item['title'] ?? '' }}" class="w-full h-full object-contain group-hover:scale-105 transition duration-300">
                        @if(!empty($item['title']) || !empty($item['caption']))
                            <figcaption class="p-3 bg-slate-50 text-center">
                                @if(!empty($item['title']))<strong class="text-slate-900">{{ $item['title'] }}</strong>@endif
                                @if(!empty($item['caption']))<span class="text-slate-600 text-sm block prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText($item['caption']) !!}</span>@endif
                            </figcaption>
                        @endif
                    </figure>
                @endif
            @endforeach
        </div>
    </div>
</section>
