<div class="w-full h-screen absolute inset-0">
    @if(!$posts->isEmpty())
        @foreach($posts as $post)
            <div class="relative w-full h-screen overflow-hidden">
                @if($post->hasMedia('*'))
                    <img src="{{ $post->getFirstMediaUrl('*', 'hero') }}"
                         alt="{{ $post->getFirstMedia('*')->getCustomProperty('caption') }}"
                         class="w-full h-screen object-cover">
                @else
                    <!-- Fallback background if no image -->
                    <div class="w-full h-screen bg-gradient-to-br from-theme-primary/20 to-theme-secondary/20"></div>
                @endif
            </div>
        @endforeach
    @else
        <!-- Fallback background if no posts -->
        <div class="w-full h-screen bg-gradient-to-br from-theme-primary/20 to-theme-secondary/20"></div>
    @endif
</div>