figure:has(image-compare){margin-inline:0}image-compare{&{--exposure:50%;--thumb-background-color:hsla(0,0%,100%,.9);--thumb-background-image:url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60" width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M40 20 L50 30 L40 40"/></svg>');--thumb-size:clamp(1em,5vmin,5em);--thumb-radius:50%;--thumb-border-color:#fff;--thumb-border-size:2px;--focus-width:var(--thumb-border-size);--focus-color:transprant;--divider-width:2px;--divider-color:#fff}&{display:flex;margin-inline:auto;max-width:100%;position:relative;width:fit-content;img{height:auto;width:100%}label{align-items:stretch;display:flex;inset:0;position:absolute}[type=range]{appearance:none;-webkit-appearance:none;background:none;border:none;cursor:e-resize;height:unset;margin:0 calc(var(--thumb-size)/-2);width:calc(100% + var(--thumb-size))}
    /* ! bug in Safari when trying to nest -moz and -webkit together under the same [type=range] */[type=range]{&::-moz-range-track{background:transparent;height:unset}&::-moz-range-thumb{background-color:var(--thumb-background-color);background-image:var(--thumb-background-image);background-position:50%;background-repeat:no-repeat;background-size:90%;border:var(--thumb-border-size) var(--thumb-border-color) solid;border-radius:var(--thumb-radius);color:var(--thumb-border-color);height:var(--thumb-size);margin:0;width:var(--thumb-size)}&:focus::-moz-range-thumb{box-shadow:0 0 0 var(--focus-width) var(--focus-color)}}[type=range]{&::-webkit-slider-runnable-track{background:transparent;height:unset}&::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--thumb-background-color);background-image:var(--thumb-background-image);background-position:50%;background-repeat:no-repeat;background-size:90%;border:var(--thumb-border-size) var(--thumb-border-color) solid;border-radius:var(--thumb-radius);color:var(--thumb-border-color);height:var(--thumb-size);margin:0;width:var(--thumb-size)}&:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--focus-width) var(--focus-color)}}}&:not(:defined){flex-direction:row;overflow-x:auto}&:defined{flex-direction:column;overflow:clip;.image-2-wrapper{filter:drop-shadow(calc(var(--divider-width)*-1) 0 0 var(--divider-color));position:absolute;top:0;img{--_top-left:calc(var(--exposure) + var(--divider-width)/2);--_bottom-left:calc(var(--exposure) + var(--divider-width)/2);clip-path:polygon(var(--_top-left) 0,100% 0,100% 100%,var(--_bottom-left) 100%)}}}&+figcaption{margin-block-start:.5lh;text-align:center}.visually-hidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}}figure.figure{margin-bottom:60px;width:100%}figure image-compare{margin:0 auto;max-width:1350px}figure image-compare .afterbefore{background-color:rgba(0,0,0,.5);color:#fff;display:none;font-size:14px;left:15px;padding:6px 20px;position:absolute;top:48%}figure image-compare .realitytxt{left:inherit;right:15px}figure image-compare:hover .afterbefore{display:block}@media (min-width:1200px) and (max-width:1920px){figure.figure{padding-left:80px;padding-right:80px}figure.figure image-compare{max-width:1380px}}@media (min-width:992px) and (max-width:1199px){figure.figure{padding-left:60px;padding-right:60px}}@media (max-width:991px){figure.figure{padding-left:20px;padding-right:20px}}