#gallery{
    width: 70%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin: 0 0 2% 0;
    }.glitchbox{
        width: 100%;
        }.glitchbox > img{
            cursor: pointer;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            transition: transform 0.3s ease-in-out;
        }.glitchbox > img:hover{
            transform: scale(1.06);
        }

/*------------------------------ Media Query ----------------------------------*/

@media (min-width: 0px) and (max-width: 576px) {

    #gallery{
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 5px;
        margin: 0 0 10% 0;
        }.glitchbox{
            width: 100%;
            }.glitchbox > img{
                cursor: pointer;
                max-width: 170px;
                max-height: 100%;
                width: auto;
                height: auto;
                transition: transform 0.3s ease-in-out;
            }.glitchbox > img:hover{
                transform: none;
            }
}