.gallery {
    --s: 150px; /* control the size */
    --g: 10px; /* control the gap */
    --f: 1.5; /* control the scale factor */
    display: grid;
    gap: var(--g);
    width: calc(10*var(--s) + 1*var(--g));
    aspect-ratio: 2;
    grid-template-columns: repeat(3,auto);
    margin-top: 40px;
}

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

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


#Panel1, #Panel2, #Panel3 {
    position: relative;
    top: 0px;
}

.button {
    color: slategray;
    background: none;
    border: none;
    font-size: 20px;
    padding: 15px 50px 15px 50px;
}

    .button:hover {
        background: linear-gradient( -225deg, lightslategray 0%, #373737 29%, dimgrey 67%, #434054 100% );
        color: #ecf0f3;
        border-radius: 28px;
    }

    .button:active {
        background: linear-gradient( -225deg, lightslategray 0%, #373737 29%, dimgrey 67%, #434054 100% );
        border-radius: 28px;
    }

.fix {
    background: linear-gradient( -225deg, lightslategray 0%, #373737 29%, dimgrey 67%, #434054 100% );
    color: #ecf0f3;
    border-radius: 28px;
}

.div_but {
    position: relative;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border: 3px solid #EBECF1;
    border-radius: 30px;
    animation: slide-in 1s ease-out;
}