* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #111;
}

.gallery {
    width: 92%;
    max-width: 1100px;
    margin: 25px auto;

    display: grid;

    /* Desktop: 4 images per row */
    grid-template-columns: repeat(4, 1fr);

    gap: 15px;
}

.gallery a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.gallery img {
    display: block;
    width: 100%;
    height: 180px;

    object-fit: cover;

    transition: transform 0.25s ease;
}

.gallery a:hover img {
    transform: scale(1.03);
}


/* Laptop / smaller desktop */
@media (max-width: 1000px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery img {
        height: 170px;
    }
}


/* Tablet */
@media (max-width: 700px) {
    .gallery {
        width: 94%;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery img {
        height: 150px;
    }
}


/* Mobile */
@media (max-width: 450px) {
    .gallery {
        width: 94%;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gallery img {
        height: 125px;
    }
}