.before-after-media--light{background-color:var(--variant-tint)}.before-after-media--soft{background-color:var(--color-light1)}.before-after-media--white{background-color:var(--color-white)}.before-after-media--dark{background-color:var(--color-black);color:var(--color-white)}.before-after-media__frame{--before-after-pos:50%;aspect-ratio:5/3;border-radius:var(--radius-card);max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);overflow:hidden;position:relative;touch-action:pan-y;width:100%}.before-after-media__frame--start-25{--before-after-pos:25%}.before-after-media__frame--start-75{--before-after-pos:75%}.before-after-media__layer{inset:0;position:absolute}.before-after-media__layer--before{clip-path:inset(0 calc(100% - var(--before-after-pos)) 0 0)}.before-after-media--single .before-after-media__layer--before{clip-path:none}.before-after-media__image{display:block;height:100%;object-fit:cover;width:100%}.before-after-media__tag{background-color:var(--color-black);border-radius:var(--radius-pill);color:var(--color-white);padding:.5rem 1rem;pointer-events:none;position:absolute;top:1rem;z-index:2}.before-after-media__tag--before{left:1rem}.before-after-media__tag--after{right:1rem}.before-after-media__divider{bottom:0;left:var(--before-after-pos);pointer-events:none;top:0;transform:translateX(-50%);width:4px;z-index:2}.before-after-media__divider,.before-after-media__handle{background-color:var(--variant-btn-light-bg,var(--color-sky));position:absolute}.before-after-media__handle{align-items:center;border-radius:var(--radius-circle);color:var(--color-white);display:flex;height:2.75rem;justify-content:center;left:50%;top:50%;transform:translate(-50%,-50%);width:2.75rem}.before-after-media__range{appearance:none;background:transparent;cursor:ew-resize;height:100%;inset:0;margin:0;opacity:0;position:absolute;width:100%;z-index:3}.before-after-media__range::-webkit-slider-thumb{appearance:none;height:100%;width:2.75rem}.before-after-media__range::-moz-range-thumb{border:0;height:100%;width:2.75rem}.before-after-media__frame:has(.before-after-media__range:focus-visible) .before-after-media__handle{outline:3px solid var(--color-white);outline-offset:2px}.before-after-media__frame.is-pointer-driven{cursor:ew-resize;user-select:none}.before-after-media__frame.is-pointer-driven .before-after-media__range{pointer-events:none}.before-after-media__actions{display:flex}.before-after-media--dark .before-after-media__cta.btn--style-3{background-color:var(--color-white);border-color:var(--color-white);color:var(--color-black)}.before-after-media--dark .before-after-media__cta.btn--style-3:hover{background-color:var(--variant-accent);border-color:var(--variant-accent);color:var(--variant-accent-fg)}@media (max-width:767px){.before-after-media__frame{aspect-ratio:4/3}.before-after-media__tag{padding:.375rem .75rem;top:.75rem}.before-after-media__tag--before{left:.75rem}.before-after-media__tag--after{right:.75rem}}