.gallery {
    padding-top: 3vh;
    width: 100%;
    margin: auto;
    columns: 6;
    column-gap: 20px;

    @media(width < 600px) {
        & {
            columns: 3;
            column-gap: 10px
        }
    }

    @media(width < 300px) {
        & {
            columns: 1;
            column-gap: 10px
        }
    }
}

.gallery .box {
    width: 100%;
    margin-bottom: 10px;
    break-inside: avoid;
    border-radius: 15px
}

.gallery .box img {
    max-width: 100%;
    min-width: 100%;
    border-radius: 10px
}

.overlay {
    background: #000000ca;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    z-index: 10000
}

.overlay img {
    width: auto;
    height: calc(100% - 20%);
    overflow: clip;
    border-radius: var(--border-rad);

    @media (width <992px) {
        width: calc(100% - 20px);
        height: auto
    }
}

.overlay ul {
    position: fixed;
    bottom: 0%;
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-y: hidden
}

.ful_image {
    animation: op 1s ease
}

.Btn {
    font-size: 2em;
    font-weight: 600;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    margin: 0;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #000
}

.overlay .prevBtn {
    position: fixed;
    bottom: 5%;
    left: 2%
}

.overlay .nextBtn {
    position: fixed;
    bottom: 5%;
    right: 2%
}

.overlay .closeBtn {
    position: fixed;
    top: 2%;
    right: 2%
}

.overlay .caption {
    color: #fff;
    font-size: 2em;
    text-align: center
}

@keyframes op {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}