.before-after-section{padding-top:calc(var(--section-padding-top, 36px));padding-bottom:calc(var(--section-padding-bottom, 36px));position:relative;z-index:1}.before-after-container{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative}.before-after-container--text_first{grid-template-areas:"content slider"}.before-after-container--text_first .before-after-content{grid-area:content}.before-after-container--text_first .comparison-slider-wrapper{grid-area:slider}.before-after-container--image_first{grid-template-areas:"slider content"}.before-after-container--image_first .before-after-content{grid-area:content}.before-after-container--image_first .comparison-slider-wrapper{grid-area:slider}.before-after-content{text-align:left;padding-left:30px;padding-right:30px}@media screen and (min-width: 750px){.before-after-content{padding-left:0;padding-right:0}}.before-after-title{margin-bottom:1.5rem;color:rgb(var(--color-foreground))}.before-after-title strong{color:var(--highlight-color, #ff5b00)}.before-after-description{font-size:1.6rem;line-height:1.6;color:rgba(var(--color-foreground),.8)}.comparison-slider-wrapper{display:flex;justify-content:center}.comparison-slider{position:relative;max-width:450px;width:100%;margin:0 auto;overflow:hidden;border-radius:12px;box-shadow:0 10px 30px #0000001a;isolation:isolate}.comparison-slider img{width:100%;height:auto;display:block}.comparison-slider__before-text,.comparison-slider__after-text{position:absolute;top:20px;z-index:4;padding:8px 16px;border-radius:6px;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.comparison-slider__before-text{left:20px}.comparison-slider__after-text{right:20px}.comparison-slider__before-text h3,.comparison-slider__after-text h3{margin:0;font-size:inherit;font-weight:inherit;color:inherit!important}.comparison-slider__underlay{position:relative;z-index:1;width:100%;height:100%}.comparison-slider__underlay img{width:100%;height:100%;object-fit:cover;display:block}.comparison-slider__overlay{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;z-index:2;transition:width .1s ease}.comparison-slider__overlay img{position:absolute;top:0;left:0;width:450px;max-width:none;height:100%;object-fit:cover}.comparison-slider__line{position:absolute;top:0;left:50%;width:6px;height:100%;background-color:#ffffffe6;z-index:3;transform:translate(-50%);transition:left .1s ease;box-shadow:0 0 10px #0000004d}.comparison-slider__handle{position:absolute;top:50%;left:50%;width:60px;height:60px;background-color:transparent;border:4px solid rgba(255,255,255,.9);border-radius:50%;transform:translate(-50%,-50%);cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #0006;z-index:4;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.comparison-slider__handle:active{cursor:grabbing}.comparison-slider__handle:before{content:"";display:none}.comparison-slider__handle svg{width:100%;height:100%;color:#ffffffe6;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}.comparison-slider__input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:5;margin:0;padding:0}.comparison-slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:60px;cursor:grab}.comparison-slider__input::-moz-range-thumb{width:60px;height:60px;cursor:grab;border:none;background:transparent}@media screen and (max-width: 768px){.before-after-container,.before-after-container--text_first,.before-after-container--image_first{grid-template-columns:1fr;grid-template-areas:"slider" "content";gap:3rem;text-align:center}.comparison-slider{max-width:100%}.before-after-description{font-size:1.4rem}.comparison-slider__overlay img{width:calc(100vw - 2rem);min-width:300px;max-width:450px}}@media screen and (max-width: 480px){.before-after-container,.before-after-container--text_first,.before-after-container--image_first{gap:2rem}.comparison-slider__before-text,.comparison-slider__after-text{top:10px;padding:6px 12px;font-size:.8rem}.comparison-slider__before-text{left:10px}.comparison-slider__after-text{right:10px}.comparison-slider__overlay img{width:100%;min-width:unset;max-width:unset}.comparison-slider__handle{width:45px;height:45px;border-width:3px}.comparison-slider__line{width:4px}.before-after-description{font-size:1.6rem}}@media screen and (max-width: 768px){.comparison-slider__overlay img{width:var(--slider-width, 100%)}}
/*# sourceMappingURL=/cdn/shop/t/62/assets/before-after-slider.css.map */