<div class="gallery-container">
    @php
        $images = array_slice(array_reverse($game->images ?? []), 0, 6);
    @endphp
    <div class="gallery-grid">
        @if(count($images) > 0)
            <div class="gallery-item gallery-item-1">
                <img src="{{ asset('storage/' . $images[0]) }}" alt="Gallery Image 1" />
            </div>
        @endif
        @if(count($images) > 1)
            <div class="gallery-item gallery-item-2">
                <img src="{{ asset('storage/' . $images[1]) }}" alt="Gallery Image 2" />
            </div>
        @endif
        @if(count($images) > 2)
            <div class="gallery-item gallery-item-3">
                <img src="{{ asset('storage/' . $images[2]) }}" alt="Gallery Image 3" />
            </div>
        @endif
        @if(count($images) > 3)
            <div class="gallery-item gallery-item-4">
                <img src="{{ asset('storage/' . $images[3]) }}" alt="Gallery Image 4" />
            </div>
        @endif
        @if(count($images) > 4)
            <div class="gallery-item gallery-item-5">
                <img src="{{ asset('storage/' . $images[4]) }}" alt="Gallery Image 5" />
            </div>
        @endif
        @if(count($images) > 5)
            <div class="gallery-item gallery-item-6">
                <img src="{{ asset('storage/' . $images[5]) }}" alt="Gallery Image 6" />
            </div>
        @endif
    </div>
</div>
<style>
    .gallery-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 48px;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        height: 500px;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
        display: block;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .gallery-item:hover img {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
    }

    .gallery-item {
        overflow: hidden;
        border-radius: 4px;
        transition: all 0.3s ease;
    }

    .gallery-item:hover {
        transform: translateY(-2px);
    }

    /* Exact grid placement as in the image */
    .gallery-item-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .gallery-item-2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .gallery-item-3 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .gallery-item-4 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .gallery-item-5 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .gallery-item-6 {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }
    /* Enhanced responsive styles */
    @media (max-width: 1200px) {
        .gallery-container {
            max-width: 1000px;
            margin: 1.8rem auto;
            padding: 40px;
        }
        .gallery-grid {
            height: 450px;
            gap: 7px;
        }
    }

    @media (max-width: 992px) {
        .gallery-container {
            max-width: 900px;
            margin: 1.5rem auto;
            padding: 35px;
        }
        .gallery-grid {
            height: 400px;
            gap: 6px;
        }
    }

    @media (max-width: 900px) {
        .gallery-container {
            max-width: 800px;
            margin: 1.2rem auto;
            padding: 30px;
        }
        .gallery-grid {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(3, 1fr);
            height: 350px;
            gap: 6px;
        }

        .gallery-item-1 {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        .gallery-item-2 {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        .gallery-item-3 {
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .gallery-item-4 {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        .gallery-item-5, .gallery-item-6 {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .gallery-container {
            max-width: 700px;
            margin: 1rem auto;
            padding: 25px;
        }
        .gallery-grid {
            height: 300px;
            gap: 5px;
        }
        .gallery-item img {
            border-radius: 3px;
        }
        .gallery-item:hover img {
            border-radius: 6px;
        }
    }

    @media (max-width: 600px) {
        .gallery-container {
            max-width: 600px;
            margin: 0.8rem auto;
            padding: 20px;
        }
        .gallery-grid {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, 1fr);
            height: 400px;
            gap: 4px;
        }

        .gallery-item-1,
        .gallery-item-2,
        .gallery-item-3,
        .gallery-item-4 {
            grid-column: 1 / 2 !important;
            grid-row: auto !important;
        }

        .gallery-item-5, .gallery-item-6 {
            display: block;
        }
    }

    @media (max-width: 480px) {
        .gallery-container {
            max-width: 500px;
            margin: 0.6rem auto;
            padding: 15px;
        }
        .gallery-grid {
            height: 350px;
            gap: 3px;
        }
        .gallery-item img {
            border-radius: 2px;
        }
        .gallery-item:hover img {
            border-radius: 4px;
        }
    }

    @media (max-width: 360px) {
        .gallery-container {
            max-width: 400px;
            margin: 0.5rem auto;
            padding: 12px;
        }
        .gallery-grid {
            height: 300px;
            gap: 2px;
        }
        .gallery-item img {
            border-radius: 2px;
        }
        .gallery-item:hover img {
            border-radius: 3px;
        }
    }

    /* Ensure proper image scaling on very small screens */
    @media (max-width: 480px) {
        .gallery-item:hover img {
            transform: scale(1.02);
        }
        .gallery-item:hover {
            transform: translateY(-1px);
        }
    }

    @media (max-width: 360px) {
        .gallery-item:hover img {
            transform: scale(1.01);
        }
        .gallery-item:hover {
            transform: translateY(0);
        }
    }
</style>
