.gallery-container{
    display: flex;
    justify-content: center;
    & .gallery-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 var(--container-space);
        width: 100%;
        max-width: 1700px;
        & .gallery{
            display: flex;
            width: 32%;
            aspect-ratio: 1 / 1;
            position: relative;
            border-radius: 20px;
            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--border-radius);
                transition: transform 0.3s ease-in-out;
                border-radius: 20px;
            }
            & .gallery-bkg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 20px;
                background-color: rgba(0, 0, 0, 0.25);
                transition: opacity 0.3s ease-in-out;
            }
            & h3{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--wp--preset--color--white);
                font-weight: 600;
                font-size: var(--wp--preset--font-size--xs-title);
                z-index: 1;
                text-align: center;
            }
            &:hover{
                cursor: pointer;
            }
        }
    }
}
.gallery-slider {
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(20,20,20,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    & .gallery-close-btn{
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        color: var(--wp--preset--color--white);
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xs-title);
        z-index: 1;
        text-align: center;
        cursor: pointer;
    }
    & .gallery-slide-wrapper{
        height: 80vh;
        width: 50%;
        & .gallery-item{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            & img, & video, & iframe{
                height: 70vh;
                width: 100%;
                object-fit: cover;
                border-radius: 20px;
            }
            & h4{
                color: var(--wp--preset--color--white);
                font-weight: 600;
                font-size: var(--wp--preset--font-size--xs-title);
                z-index: 1;
                text-align: center;
            }
        }
    }
    & .gallery-btn{
        position: absolute;
        top: 50%;
        cursor: pointer;
        width: 40px;
        height: 40px;
        border: none;
        &.gallery-prev-btn{
            left: var(--container-space);
            transform: translateY(-50%);
            background: url(../../../assets/svg/left_arrow.svg) no-repeat center center;
        }
        &.gallery-next-btn{
            right: var(--container-space);
            transform: translateY(-50%);
            background: url(../../../assets/svg/right_arrow.svg) no-repeat center center;
        }

    }
}
.gallery-slider-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto;
    transition: opacity 0.4s cubic-bezier(.77,0,.175,1), transform 0.4s cubic-bezier(.77,0,.175,1);
}
.gallery-slider-hide {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(.77,0,.175,1), transform 0.4s cubic-bezier(.77,0,.175,1);
}
body.gallery-slider-open {
    overflow: hidden;
}
@media (max-width: 576px) { 
    .gallery-container{
        & .gallery-wrapper{
            & .gallery{
                width: 48%;
                & h3{
                    font-size: var(--wp--preset--font-size--l-text);
                    margin: 0;
                }
            }
        }
    }
    .gallery-slider {
        & .gallery-slide-wrapper {
            width: 80%;
        }
    }
}