.before-after-section{background-color:var(--ds-color-palette-1000)}.before-after-wrapper{position:relative;max-width:var(--page-width);margin:0 auto}@media(max-width:749px){.before-after-wrapper{padding:0!important}}.before-after-slider{position:relative;width:100%;overflow:hidden;display:grid;gap:2.4rem;padding:0 6.4rem}@media(max-width:749px){.before-after-slider{padding:0}}.before-after-slides{position:relative;width:100%}.before-after-slide{display:none;position:relative;width:100%;-webkit-user-select:none;user-select:none}.before-after-slide.is-active{display:block}.before-after-slide__container{position:relative;width:100%;overflow:hidden}.before-after-slide__container--small{height:300px}.before-after-slide__container--medium{height:450px}.before-after-slide__container--large{height:600px}.before-after-slide__container--adapt{height:auto}@media screen and (min-width:750px){.before-after-slide__container--small{height:400px}.before-after-slide__container--medium{height:550px}.before-after-slide__container--large{height:700px}}.before-after__image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.before-after__image-wrapper--before{z-index:1}.before-after__image-wrapper--after{z-index:2;clip-path:inset(0 0 0 50%)}.before-after__image{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.before-after__label{position:absolute;top:20px;z-index:1;padding:8px 16px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ds-color-palette-0);background-color:var(--before-after-label-bg, transparent);pointer-events:none}.before-after__label--before{left:20px}.before-after__label--after{right:20px}@media screen and (min-width:750px){.before-after__label{top:30px;padding:10px 20px;font-size:12px}.before-after__label--before{left:30px}.before-after__label--after{right:30px}}.before-after__handle{position:absolute;top:0;left:50%;width:4px;height:100%;z-index:2;transform:translate(-50%);cursor:ew-resize}.before-after__handle:before{content:"";position:absolute;top:0;left:50%;width:2px;height:100%;background-color:var(--ds-color-palette-0);transform:translate(-50%)}.before-after__handle-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background-color:var(--ds-color-palette-900);border:1px solid var(--ds-color-palette-0);cursor:ew-resize;transition:transform .15s ease,background-color .15s ease}.before-after__handle-button:hover{transform:translate(-50%,-50%) scale(1.1);background-color:var(--ds-color-palette-800)}.before-after__handle-icon{display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ds-color-palette-0);font-size:14px;font-weight:600}.before-after__handle-icon svg{width:8px;height:14px;fill:currentColor}.before-after__handle-touch-area{position:absolute;top:0;left:50%;width:44px;height:100%;transform:translate(-50%);cursor:ew-resize}.before-after__nav{z-index:0;display:flex;align-items:center;justify-content:center;gap:.4rem}.before-after__nav-button{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:.5rem;background-color:transparent;border:none;color:var(--ds-color-palette-0);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.before-after__nav-button:hover{background-color:var(--ds-color-palette-800)}.before-after__nav-button:disabled{opacity:.5;cursor:not-allowed}.before-after__nav-button svg{width:100%;fill:currentColor}.before-after__nav-counter{font-weight:500;color:var(--ds-color-palette-0);text-align:center}@media screen and (min-width:750px){.before-after__nav{gap:.4rem}.before-after__nav-counter{font-size:14px}}.before-after-slider.is-dragging{cursor:ew-resize}.before-after-slider.is-dragging .before-after__handle-button{transform:translate(-50%,-50%) scale(1.15)}.before-after__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#1a1a1a}.before-after__placeholder svg{width:60px;height:60px;fill:#444}.before-after__handle:focus-visible .before-after__handle-button{outline:2px solid var(--ds-color-palette-0);outline-offset:2px}.before-after__nav-button:focus-visible{outline:2px solid var(--ds-color-palette-0);outline-offset:2px}@keyframes before-after-reveal{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 50%)}}.before-after-slide.animate-reveal .before-after__image-wrapper--after{animation:before-after-reveal .8s ease-out forwards}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-before-after.css.map */