*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}html{background-color:#f3f3f3}.before-after{max-width:100%;overflow:hidden;position:relative;width:100%}.before-after img{background:#000;display:block;height:100%;object-fit:contain;pointer-events:none;user-select:none;width:100%}@media (min-width:768px){.before-after.static-mode{align-items:center;display:flex;height:auto;justify-content:center}.before-after.static-mode .half{height:auto;max-width:100%;padding:0;width:50vw}.before-after.static-mode .after-image,.before-after.static-mode .slider{display:none!important}.before-after.static-mode img{height:auto;object-fit:contain;position:static;width:100%}}@media (max-width:767px){.before-after.slider-mode img{left:0;object-fit:cover;position:absolute;top:0}.before-after.slider-mode .after-image{clip-path:inset(0 0 0 50%);z-index:2}.before-after.slider-mode .slider{background:#fff;bottom:0;cursor:ew-resize;left:50%;position:absolute;top:0;width:3px;z-index:3}.before-after.slider-mode .slider:after{background:#007bff;border:2px solid #fff;border-radius:50%;content:"";height:18px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px}}.before-after .label{background:rgba(0,0,0,.7);border-radius:.25rem;color:#fff;font-size:.75rem;left:.6rem;padding:.25rem .5rem;pointer-events:none;position:absolute;top:.6rem;z-index:3}.before-after .label.right{left:auto;right:.6rem}.before-after.slider-mode .slider{transition:left .07s ease-out}.before-after.slider-mode .before-image{transition:clip-path .07s ease-out}.before-after.slider-mode.dragging .before-image,.before-after.slider-mode.dragging .slider{transition:none}.before-after.slider-mode .slider{will-change:left}.before-after.slider-mode .before-image{will-change:clip-path}.before-after[data-aspect="16x9"]{aspect-ratio:16/9}.before-after[data-aspect="4x3"]{aspect-ratio:4/3}.before-after[data-aspect="3x2"]{aspect-ratio:3/2}.before-after[data-aspect="2x3"]{aspect-ratio:2/3}.before-after[data-aspect="1x1"]{aspect-ratio:1/1}.before-after[data-aspect="3x4"]{aspect-ratio:3/4}.before-after[data-aspect="9x16"]{aspect-ratio:9/16}
