.before-after-section{padding:var(--section-spacing-unit-size) 0}.before-after-section--full-width .page-width-desktop{max-width:100%;padding:0}.before-after-container{position:relative;overflow:hidden;border-radius:var(--border-radius)}.before-after--small{height:400px}.before-after--medium{height:600px}.before-after--large{height:800px}@media screen and (max-width: 749px){.before-after--small{height:300px}.before-after--medium{height:400px}.before-after--large{height:500px}}.before-after-image{position:absolute;top:0;left:0;width:100%;height:100%}.before-after-image--background{z-index:1}.before-after-image--foreground{z-index:2;clip-path:inset(0 50% 0 0)}before-after[data-layout=vertical] .before-after-image--foreground{clip-path:inset(0 0 50% 0)}.invert-layout .before-after-image--foreground{clip-path:inset(0 0 0 50%)}before-after[data-layout=vertical].invert-layout .before-after-image--foreground{clip-path:inset(50% 0 0 0)}.before-after-image__wrapper{position:relative;width:100%;height:100%}.before-after-image__img{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.before-after-image__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient-background)}.before-after-image__placeholder svg{width:100px;height:100px;opacity:.3}.before-after-image__label{position:absolute;z-index:10;padding:12px 24px;background:#000000b3;color:#fff;border-radius:4px;font-size:20px;font-weight:700;pointer-events:none;text-transform:uppercase;letter-spacing:.1em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.before-after-image__label--v-top{top:20px}.before-after-image__label--v-middle{top:50%;transform:translateY(-50%)}.before-after-image__label--v-bottom{bottom:20px;top:auto}.before-after-image__label--h-left{left:20px}.before-after-image__label--h-center{left:50%;transform:translate(-50%)}.before-after-image__label--v-middle.before-after-image__label--h-center{transform:translate(-50%,-50%)}.before-after-image__label--h-right{right:20px;left:auto}.before-after-slider{position:absolute;z-index:3;-webkit-appearance:none;appearance:none;width:100%;height:100%;background:transparent;outline:none;margin:0;cursor:ew-resize;opacity:0;pointer-events:none}.before-after-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}.before-after-slider::-moz-range-thumb{width:0;height:0;border:none;background:transparent}.before-after-slider[orient=vertical]{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:100%;height:100%;cursor:ns-resize}.before-after-handle{position:absolute;z-index:4;top:0;left:50%;width:4px;height:100%;background:#fff;transform:translate(-50%);pointer-events:none;-webkit-user-select:none;user-select:none;box-shadow:0 0 8px #0000004d}.before-after--style-dark .before-after-handle{background:#fff}.before-after--style-light .before-after-handle{background:rgb(var(--color-foreground))}before-after[data-layout=vertical] .before-after-handle{top:50%;left:0;width:100%;height:4px;transform:translateY(-50%)}.before-after-handle__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;cursor:grab;touch-action:none;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease;animation:pulse-hint 2s ease-in-out infinite}@keyframes pulse-hint{0%,to{box-shadow:0 4px 12px #0000004d}50%{box-shadow:0 4px 20px #00000080,0 0 0 4px #ffffff4d}}.before-after-handle__icon:hover{transform:translate(-50%,-50%) scale(1.1);animation:none}.before-after-handle__icon.is-dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1);animation:none}.before-after--style-dark .before-after-handle__icon{background:#fff;color:rgb(var(--color-foreground))}.before-after--style-light .before-after-handle__icon{background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.before-after-handle__icon svg{width:24px;height:24px}before-after[data-layout=vertical] .before-after-handle__icon svg{transform:rotate(90deg)}.before-after-slider:hover~.before-after-handle .before-after-handle__icon{transform:translate(-50%,-50%) scale(1.1);transition:transform .2s ease}.before-after-slider:active~.before-after-handle .before-after-handle__icon{transform:translate(-50%,-50%) scale(.95)}@media screen and (max-width: 749px){.before-after-image__label{padding:8px 16px;font-size:16px}.before-after-image__label--v-top{top:12px}.before-after-image__label--v-bottom{bottom:12px}.before-after-image__label--h-left{left:12px}.before-after-image__label--h-right{right:12px}.before-after-handle__icon{width:56px;height:56px}.before-after-handle__icon svg{width:24px;height:24px}@keyframes pulse-hint{0%,to{box-shadow:0 4px 12px #0000004d}50%{box-shadow:0 4px 20px #00000080,0 0 0 6px #fff6}}}.before-after-slider:focus~.before-after-handle .before-after-handle__icon{outline:2px solid rgb(var(--color-button));outline-offset:2px}@media (hover: none){.before-after-slider{cursor:grab}.before-after-slider:active{cursor:grabbing}.before-after-slider[orient=vertical]{cursor:grab}.before-after-slider[orient=vertical]:active{cursor:grabbing}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/section-before-after.css.map */