html, body {
    overflow-x: hidden;
}
/* --------------------
   DEFAULT (Mobile First)
   For screens smaller than 768px
--------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 2 columns on mobile */
    gap: 10px;
    padding: 20px;
    width: 100%;
}

.gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: 0.3s;
}

/* Disable scaling on mobile */
.gallery img:hover {
    width: 100%;
    height: 150px;
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
}

/* --------------------
   TABLET & DESKTOP VIEW
   (768px and above)
   Apply your original gallery style
--------------------- */
@media (min-width: 768px) {
    .gallery {
        --s: 150px; /* size */
        --g: 10px;  /* gap */
        --f: 1.5;   /* scale factor */

        display: grid;
        gap: var(--g);
        width: calc(5 * var(--s) + 4 * var(--g));
        aspect-ratio: 1;
        grid-template-columns: repeat(5, auto);
        margin: 0 auto;
        padding: 50px;
    }

    .gallery > img {
        width: 0;
        height: 0;
        min-height: 100%;
        min-width: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: .35s linear;
    }

    .gallery img:hover {
        width: calc(var(--s) * var(--f));
        height: calc(var(--s) * var(--f));
    }

    /* Also prevent horizontal scrolling on desktop */
    html, body {
        overflow-x: hidden;
    }
}