.before-after__header{margin-bottom:3rem}.before-after__subheading{font-size:1.2rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.before-after__heading{margin:0 0 1.5rem}.before-after__content p{margin:0;color:rgba(var(--color-foreground),.75)}.before-after__slider{display:block;position:relative;width:100%;overflow:hidden;border-radius:var(--media-radius);z-index:0}.before-after__track{position:relative;width:100%;height:100%}.before-after__item{width:100%;height:100%}.before-after__item--before{position:relative;z-index:1}.before-after__item--after{position:absolute;top:0;left:0;z-index:2;transform:translateZ(0)}.before-after__slider--horizontal .before-after__item--after{clip-path:polygon(var(--percent) 0,100% 0,100% 100%,var(--percent) 100%)}.before-after__slider--vertical .before-after__item--after{clip-path:polygon(0 var(--percent),100% var(--percent),100% 100%,0 100%)}.before-after__media{width:100%;height:100%}.before-after__media img,.before-after__media svg{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__slider--adapt .before-after__item--before .before-after__media img,.before-after__slider--adapt .before-after__item--before .before-after__media svg{position:static!important;height:auto!important}.before-after__slider--small{height:40rem}.before-after__slider--medium{height:50rem}.before-after__slider--large{height:60rem}@media screen and (max-width:749px){.before-after__slider--small{height:30rem}.before-after__slider--medium{height:40rem}.before-after__slider--large{height:50rem}}.before-after__slider:not(.before-after__slider--adapt) .before-after__media img,.before-after__slider:not(.before-after__slider--adapt) .before-after__media svg{position:absolute!important;height:100%!important}.before-after__media>svg.placeholder-svg{height:60vh;min-height:400px}.before-after__overlay{position:absolute;bottom:3rem;padding:1.5rem 2rem;border-radius:0;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;z-index:3;background:transparent!important}.before-after__overlay--left{left:2rem;align-items:flex-start;text-align:left}.before-after__overlay--right{right:2rem;align-items:flex-end;text-align:right}.before-after__text p{margin:0;font-size:1.3rem;text-transform:uppercase;letter-spacing:.1em}.before-after__overlay .link{font-size:1.2rem;text-transform:capitalize;letter-spacing:.05em;color:rgb(var(--color-foreground));text-decoration:none;position:relative;display:inline-block}.before-after__overlay .link:after{content:"";position:absolute;width:100%;height:1px;bottom:-.3rem;left:0;background-color:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.25,1,.5,1)}.before-after__overlay .link:hover:after{transform:scaleX(0)}.before-after__handle{position:absolute;z-index:4;top:0;left:var(--percent);bottom:0;width:1px;background:var(--cursor-bg, #fff);transform:translate(-50%);cursor:ew-resize;display:flex;align-items:center;justify-content:center}.before-after__slider--vertical .before-after__handle{top:var(--percent);left:0;right:0;bottom:auto;width:auto;height:1px;transform:translateY(-50%);cursor:ns-resize}.before-after__handle:before{content:"";position:absolute;top:0;left:-20px;right:-20px;bottom:0}.before-after__slider--vertical .before-after__handle:before{top:-20px;bottom:-20px;left:0;right:0}.before-after__handle-icon{width:48px;height:48px;flex-shrink:0;background:var(--cursor-bg, #fff);color:var(--cursor-color, #000);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #0000001a;transition:transform .2s ease;position:relative;z-index:2}.before-after__slider--vertical .before-after__handle-icon{transform:rotate(90deg)}.before-after__slider.is-dragging .before-after__handle-icon{transform:scale(.9)}.before-after__slider--vertical.is-dragging .before-after__handle-icon{transform:rotate(90deg) scale(.9)}.before-after__handle-icon svg{width:100%;height:100%}.before-after__handle:focus-visible{outline:none}.before-after__handle:focus-visible .before-after__handle-icon{box-shadow:0 0 0 3px rgba(var(--color-foreground),.5)}@media screen and (max-width:749px){.before-after__overlay{bottom:1.5rem;padding:1rem 1.5rem;gap:1rem}.before-after__overlay--left{left:1.5rem}.before-after__overlay--right{right:1.5rem}.before-after__text p{font-size:1.1rem}.before-after__handle-icon{width:36px;height:36px}.before-after__handle-icon svg{width:100%;height:100%}}
/*# sourceMappingURL=/cdn/shop/t/73/assets/before-after.css.map */