.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

    /* DESKTOP COLLAGE */
    .gallery img:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery img:nth-child(2) {
        grid-column: span 2;
    }

    .gallery img:nth-child(3) {
        grid-column: span 2;
    }

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

        /* RESET ALL SPANS */
        .gallery img {
            grid-column: span 1 !important;
            grid-row: span 1 !important;
        }

            /* Optional hero image on mobile */
            .gallery img:nth-child(1) {
                grid-column: span 2 !important;
            }
}