.before-after__heading{margin:0 0 2rem;text-align:center}.before-after{position:relative;display:block;max-width:75rem;margin:0 auto;--before-after-position: 50%}.before-after__frame{position:relative;overflow:hidden;border-radius:var(--media-radius, 0);border:var(--media-border-width) solid rgba(var(--color-foreground),var(--media-border-opacity));aspect-ratio:4 / 3}.before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.before-after__image img{width:100%;height:100%;object-fit:cover;display:block}.before-after__image--before{clip-path:inset(0 calc(100% - var(--before-after-position)) 0 0)}.before-after__badge{position:absolute;bottom:1.2rem;z-index:2;padding:.5rem 1.2rem;font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;background:rgb(var(--color-background));color:rgb(var(--color-foreground));border-radius:var(--buttons-radius, 3rem);border:.1rem solid rgba(var(--color-foreground),.15)}.before-after__badge--before{left:1.2rem}.before-after__badge--after{right:1.2rem}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--before-after-position);transform:translate(-50%);z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}.before-after__handle-line{position:absolute;top:0;bottom:0;width:.2rem;background:rgb(var(--color-background));box-shadow:0 0 .6rem #00000059}.before-after__handle-grip{position:relative;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 .2rem .6rem #00000040}.before-after__handle-grip .svg-wrapper{width:1rem;height:1rem}.before-after__handle-grip .svg-wrapper:first-child{transform:rotate(90deg);margin-right:.2rem}.before-after__handle-grip-right{transform:rotate(-90deg);margin-left:.2rem}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}.before-after__range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:4.4rem;height:100%}.before-after__range::-moz-range-thumb{width:4.4rem;height:100%;border:none;background:transparent}.before-after--placeholder{text-align:center}.before-after__placeholder-text{margin-top:1rem;opacity:.7}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-before-after-slider.css.map */