.wsm-gallery{
    position:relative;
    width:100%;
    max-width:100%;
    padding:30px 0;
    overflow:hidden;
}

.gallery-title{
    margin:0 0 20px;
    line-height:1.2;
}

.gallery-title.align-left{
    text-align:left;
}

.gallery-title.align-center{
    text-align:center;
}

.gallery-title.align-right{
    text-align:right;
}

/* ===========================
   LAYOUT
=========================== */

.gallery-layout{
    display:flex;
    gap:12px;
    width:100%;
    max-width:100%;
    min-width:0;
    align-items:stretch;
}

.gallery-main{
    flex:1;
    min-width:0;
    width:100%;
}

.gallery-slide{
    display:none;
    position:relative;
    width:100%;
    height:var(--wsm-slider-height);
    overflow:hidden;
    border-radius:10px;
}

.gallery-slide.active{
    display:block;
}

.gallery-slide img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===========================
   OVERLAY
=========================== */

.gallery-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px;
    background:var(--wsm-overlay-bg);
}

.overlay-title{
    font-size:var(--wsm-overlay-title-size);
    color:var(--wsm-title-color);
    font-weight: 600;
    margin-bottom:6px;
}

.overlay-text{
    font-size:var(--wsm-overlay-text-size);
    color:var(--wsm-text-color);
}

/* ===========================
   THUMBNAILS
=========================== */

.gallery-thumbs{
    display:flex;
    gap:10px;
    min-width:0;
    scroll-behavior:smooth;
}

.gallery-thumbs img{
    width:var(--wsm-thumb-size);
    height:var(--wsm-thumb-size);
    min-width:var(--wsm-thumb-size);
    object-fit:cover;
    cursor:pointer;
    border-radius:8px;
    border:2px solid transparent;
    opacity:.6;
    flex-shrink:0;
    transition:.25s;
}

.gallery-thumbs img:hover{
    transform:scale(1.05);
}

.gallery-thumbs img.active{
    opacity:1;
    border-color:#000;
}

/* ===========================
   BOTTOM
=========================== */

.wsm-gallery.thumbs-bottom .gallery-layout{
    flex-direction:column;
}

.wsm-gallery.thumbs-bottom .gallery-thumbs{
    order:2;
    overflow-x:auto;
    overflow-y:hidden;
}

/* ===========================
   TOP
=========================== */

.wsm-gallery.thumbs-top .gallery-layout{
    flex-direction:column;
}

.wsm-gallery.thumbs-top .gallery-thumbs{
    order:1;
    overflow-x:auto;
    overflow-y:hidden;
}

/* ===========================
   LEFT
=========================== */

.wsm-gallery.thumbs-left .gallery-layout{
    flex-direction:row;
}

.wsm-gallery.thumbs-left .gallery-thumbs{
    flex-direction:column;
    max-height:var(--wsm-slider-height);
    overflow-y:auto;
    overflow-x:hidden;
}

/* ===========================
   RIGHT
=========================== */

.wsm-gallery.thumbs-right .gallery-layout{
    flex-direction:row;
}

.wsm-gallery.thumbs-right .gallery-thumbs{
    order:2;
    flex-direction:column;
    max-height:var(--wsm-slider-height);
    overflow-y:auto;
    overflow-x:hidden;
}

/* ===========================
   SCROLLBAR
=========================== */

.gallery-thumbs::-webkit-scrollbar{
    width:6px;
    height:6px;
}

.gallery-thumbs::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.3);
    border-radius:20px;
}

.gallery-thumbs{
    scrollbar-width:thin;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .wsm-gallery{
        overflow:hidden;
    }

    .gallery-title{
        font-size:var(--mobile-title-size)!important;
    }

    .gallery-layout{
        display:block;
    }

    .gallery-main{
        width:100%;
    }

    .gallery-slide{
        width:100%;
        height:260px;
    }

    .gallery-slide img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .gallery-thumbs{
        display:flex;
        flex-direction:row !important;
        gap:8px;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        padding:10px 0;
        white-space:nowrap;
    }

    .gallery-thumbs img{
        width:70px !important;
        height:70px !important;
        min-width:70px !important;
    }

}

@media (min-width:769px){

    .gallery-layout{
        display:flex;
        align-items:stretch;
    }

    .gallery-main{
        flex:1;
        width:100%;
    }

    .gallery-slide{
        display:none;
        width:100%;
        height:var(--wsm-slider-height);
    }

    .gallery-slide.active{
        display:block;
    }

}