img-comparison-slider {
    visibility: hidden;
}

img-comparison-slider [slot='second'] {
    display: none;
}

img-comparison-slider.rendered {
    visibility: inherit;
    width: 100%;
}

img-comparison-slider.rendered [slot='second'] {
    display: unset;
}

img-comparison-slider .before, 
img-comparison-slider .after {
    margin: 0;
    position: relative;
    overflow: hidden;
}

img-comparison-slider .before img,
img-comparison-slider .after img {
    width: 100%;
    height: inherit;
    object-fit: cover;
    object-position: center;
    display: block;
}

img-comparison-slider .before figcaption,
img-comparison-slider .after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
    z-index: 10;
}

img-comparison-slider .before figcaption {
    left: 12px;
}

img-comparison-slider .after figcaption {
    right: 12px;
}

img-comparison-slider .custom-handle {
    transition: transform 0.2s;
}

img-comparison-slider:hover .custom-handle {
    --default-handle-width: 100px;
    --default-handle-color: white;
    --default-handle-opacity: 1;
}