.ad-before-after { aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.ad-before-after > img, .ad-before-after__before img { height: 100%; object-fit: cover; width: 100%; }
.ad-before-after__before { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: var(--ad-split); }
.ad-before-after__before img { max-width: none; width: calc(100vw); }
.ad-before-after__range { appearance: none; background: transparent; cursor: ew-resize; height: 100%; inset: 0; margin: 0; position: absolute; width: 100%; }
.ad-before-after__range::-webkit-slider-thumb { appearance: none; background: #fff; border: 2px solid #e9021e; border-radius: 50%; height: 34px; width: 34px; }
.ad-before-after__range::-moz-range-thumb { background: #fff; border: 2px solid #e9021e; border-radius: 50%; height: 30px; width: 30px; }
.ad-before-after__label { background: rgba(18,18,18,.8); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; position: absolute; top: 12px; }
.ad-before-after__label--before { left: 12px; }.ad-before-after__label--after { right: 12px; }