/**
 * Before / After Image Slider Styles
 */

/* SECTION */

.se-before-after{
    margin:40px 0;
    padding:40px 20px;
    background:#f8fafc;
    border-radius:8px;
}
.se-before-after-grid{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:20px  !important;
}

/* HEADING */

.se-before-after h2{
    text-align:center;
    margin-bottom:30px;
    font-size:1.8rem;
}

/* SLIDER GRID */

.se-before-after{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

/* EACH SLIDER 

.se-before-after .ba-slider{
    width:calc(50% - 10px);
}*/

/* MOBILE */

@media (max-width:768px){

.se-before-after .ba-slider{
    width:100%;
}

}


/* SLIDER */

.ba-slider{
position:relative;
width:100%;
aspect-ratio:4/3;
overflow:hidden;
border-radius:6px;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
background:#eee;
}

/* IMAGES */

.ba-slider .ba-before,
.ba-slider .ba-after{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* BASE IMAGE */

.ba-slider .ba-before{
    position:relative;
    z-index:1;
}

/* RESIZE OVERLAY */


.ba-slider .ba-resize{
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
overflow:hidden;
z-index:2;
}

.ba-slider .ba-resize .ba-after{
position:absolute;
top:0;
left:0;
height:100%;
object-fit:cover;
}

/* AFTER IMAGE */

.ba-slider .ba-resize .ba-after{
position:absolute;
top:0;
left:0;
width:150%;
height:100%;
object-fit:cover;
object-position:left center;
max-width:none;
}
.ba-slider{
aspect-ratio:4/3;
}

/* HANDLE */

.ba-handle{
    position:absolute;
    top:0;
    left:50%;
    width:4px;
    height:100%;
    background:#fff;
    transform:translateX(-50%);
    z-index:3;
    cursor:ew-resize;
    box-shadow:0 0 8px rgba(0,0,0,0.4);
}

.ba-handle::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:32px;
    height:32px;
    margin:-16px 0 0 -16px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
    border:2px solid #333;
}

.ba-handle::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border-left:2px solid #333;
    border-right:2px solid #333;
}

/* LABELS */

.ba-label{
    position:absolute;
    top:12px;
    padding:5px 12px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:12px;
    font-weight:600;
    border-radius:3px;
    z-index:4;
}

.ba-label-before{
    left:12px;
}

.ba-label-after{
    right:12px;
}


@media (max-width:768px){
.se-before-after-grid{
grid-template-columns:1fr;
}
}