@push('style_css') <style>
    .max-w-5xl {
        max-width: 1600px !important;
    }
</style> @endpush

<div class="max-w-5xl mx-auto py-20">
    <div class="grid grid-cols-8 gap-4 ">
        @foreach ($images as $image)
        <a x-data="{ loaded: false, init() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !this.loaded) { const img = new Image(); img.src = '{{ asset('images/' . $image) }}'; img.onload = () => { this.loaded = true; observer.unobserve(this.$el); }; } }); }, { rootMargin: '200px' }); observer.observe(this.$el); } }" href="#" wire:navigate style="height: 230px " class="hover:backdrop-blur cursor-pointer bg-gray-200 col-span-1 border overflow-hidden rounded-xl shadow">
            <div x-show="!loaded" class="animate-pulse flex items-center justify-center w-full h-full">
                <div role="status" class="!bg-gray-200 animate-pulse h-full w-full">
                    <div class="h-full bg-gray-200 rounded-full dark:bg-gray-700 w-full mb-2.5"></div> <span class="sr-only">Loading...</span>
                </div>
            </div>
            <img height="300" x-cloak x-show="loaded" class="bg-cover bg-center border w-full h-[230px] " x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" :src="'{{ asset('images/' . $image) }}'" loading="lazy">
        </a>
        @endforeach
    </div>
</div>