.custom-image-before-after{width:100%}.custom-image-before-after__wrapper{--before-after-position:50%;--before-after-aspect-ratio:16 / 9;position:relative;display:block;width:100%;aspect-ratio:var(--before-after-aspect-ratio);overflow:hidden;border-radius:var(--radius-m);background:#111;isolation:isolate}.custom-image-before-after__image{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.custom-image-before-after__before{position:absolute;inset:0;z-index:2;clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.custom-image-before-after__image--before{max-width:none}.custom-image-before-after__label{position:absolute;top:clamp(10px, 2vw, 16px);z-index:3;display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid rgb(255 255 255 / .45);border-radius:4px;background:rgb(0 0 0 / .72);color:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1;letter-spacing:.02em;pointer-events:none}.custom-image-before-after__label--before{left:clamp(10px, 2vw, 16px)}.custom-image-before-after__label--after{right:clamp(10px, 2vw, 16px)}.custom-image-before-after__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.custom-image-before-after__handle{position:absolute;top:0;bottom:0;left:var(--before-after-position);z-index:3;width:2px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .12);transform:translateX(-50%);pointer-events:none}.custom-image-before-after__handle::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;border:2px solid #fff;border-radius:999px;background:rgb(0 0 0 / .28);box-shadow:0 4px 12px rgb(0 0 0 / .18);transform:translate(-50%,-50%)}.custom-image-before-after__handle::after{content:"";position:absolute;top:50%;left:50%;z-index:1;width:24px;height:12px;background:url("data:image/svg+xml,%3Csvg width='24' height='12' viewBox='0 0 24 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2L4 6L8 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 2L20 6L16 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;opacity:.9;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .32));transform:translate(-50%,-50%)}@media (max-width:575px){.custom-image-before-after__label{min-height:26px;padding:4px 8px;font-size:12px}}