.before-after-image--container{display:block;position:relative}.before-after-image--media{display:block;position:relative;overflow:hidden}.before-after-image--media:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;background:rgba(var(--color-overlay-rgb),var(--overlay-opacity))}.before-after-image--image .thb-placeholder,.before-after-image--image img{position:absolute;top:0;left:0;width:100%;height:100%}.before-after-image--image .thb-placeholder svg,.before-after-image--image img svg{object-fit:contain}.before-after-image--image img{object-fit:cover}@media only screen and (max-width:767px){.before-after-image--image.mobile-height-image{aspect-ratio:var(--image-aspect);min-height:unset}}@media only screen and (min-width:768px){.before-after-image--image.desktop-height-image{aspect-ratio:var(--image-aspect);min-height:unset}}.before-after-image--2{clip-path:inset(0px 0px 0px var(--percent));position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden}.before-after-image--2 .before-after-image--content{justify-content:flex-end}.before-after-image--content{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;display:flex;padding:20px}.before-after-image--content-center{align-items:center}.before-after-image--content-bottom{align-items:flex-end}.before-after-image--content .before-after-image--content-title{margin:0;background:var(--color-text, #fff);color:inherit;font-family:Lexend;font-weight:400;font-size:16px;line-height:100%;letter-spacing:0;padding:9px 18px;border-radius:80px;height:fit-content}.before-after-image--slider{position:absolute;top:50%;width:100%;left:0;z-index:40;transform:translateY(-50%);opacity:0;height:54px;cursor:pointer}.before-after-image--divider{position:absolute;top:0;bottom:0;z-index:1;width:4px;left:calc(var(--percent) - 1px);background:var(--color-line, --bg-body);box-shadow:0 4px 4px #00000040}.before-after-image--divider svg{position:absolute;top:50%;left:50%;z-index:11;transform:translate3d(-50%,-50%,0);z-index:20;border-radius:20px;cursor:pointer;color:var(--color-primary)}.before-after-image--mobile{display:block}@media only screen and (min-width:768px){.before-after-image--mobile{display:none}}.before-after-image--desktop{display:none}@media only screen and (min-width:768px){.before-after-image--desktop{display:block}}@media only screen and (max-width:767px){.mobile-height-full{min-height:100vh}@supports (height: 100svh){.mobile-height-full{height:100svh}}}@media only screen and (max-width:767px){.mobile-height-auto{min-height:auto}}@media only screen and (max-width:767px){.mobile-height-300{min-height:300px}}@media only screen and (max-width:767px){.mobile-height-350{min-height:350px}}@media only screen and (max-width:767px){.mobile-height-400{min-height:400px}}@media only screen and (max-width:767px){.mobile-height-450{min-height:450px}}@media only screen and (max-width:767px){.mobile-height-500{min-height:500px}}@media only screen and (min-width:768px){.desktop-height-full{min-height:100vh}}@media only screen and (min-width:768px){.desktop-height-auto{min-height:auto}}@media only screen and (min-width:768px){.desktop-height-450{min-height:450px}}@media only screen and (min-width:768px){.desktop-height-550{min-height:550px}}@media only screen and (min-width:768px){.desktop-height-650{min-height:650px}}@media only screen and (min-width:768px){.desktop-height-750{min-height:750px}}.before-after-image-grid{display:flex;border-radius:16px;overflow:hidden}.before-after-image-grid .before-after-image--inner{width:62%}.before-after-image-grid .before-after-image-content{width:38%}.before-after-image-content-wrap{padding:8rem 8rem 8rem 10.8rem;height:100%;display:flex;flex-direction:column;justify-content:center}.before-after-image__heading{margin-top:0;margin-bottom:22px}.before-after-image__button{margin-top:32px}@media screen and (max-width:1200px){.before-after-image-content-wrap{padding:5rem}}@media screen and (max-width:1024px){.before-after-image-grid .before-after-image-content,.before-after-image-grid .before-after-image--inner{width:100%}.before-after-image-grid{flex-direction:column}}@media screen and (max-width:580px){.before-after-image-content-wrap{padding:3rem}.before-after-image--divider svg{width:45px}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/before-after-image.css.map */