.before-after--wrapper{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:pan-y}.before-after-gallery{width:100%}.before-after-gallery--list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.before-after-gallery--item-inner{display:flex;flex-direction:column;gap:12px}.before-after--card-wrapper{position:relative;border-radius:var(--card_radius, 0);overflow:hidden}.before-after-gallery--item{position:relative;min-width:0}.before-after-gallery--testimonial{margin-top:12px;text-align:left;padding:0 4px}.before-after-gallery--problem,.before-after-gallery--result{font-size:14px;line-height:1.5;margin:0;color:var(--text_color, #333)}.before-after-gallery--result strong{color:#4a7c59;font-style:italic}@media(max-width:1199px){.before-after-gallery--list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.before-after-gallery--list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:15px;gap:16px;padding:0 35px 10px 15px}.before-after-gallery--item{flex:0 0 80%;scroll-snap-align:start}.before-after-gallery--list::-webkit-scrollbar{display:none}}.js .before-after--wrapper{--percent: 10%}html.no-js .before-after--wrapper{--percent: 50%}.before-after--overlay{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;clip-path:inset(0px 0px 0px var(--percent))}.before-after--wrapper.animating .before-after--overlay{transition:clip-path .7s cubic-bezier(.7,0,.3,1)}.image-effect-blur .media{filter:blur(var(--filter_amount))}.image-effect-brightness .media{filter:brightness(var(--filter_amount))}.image-effect-contrast .media{filter:contrast(var(--filter_amount))}.image-effect-grayscale .media{filter:grayscale(var(--filter_amount))}.image-effect-invert .media{filter:invert(var(--filter_amount))}.image-effect-saturate .media{filter:saturate(var(--filter_amount))}.image-effect-sepia .media{filter:sepia(var(--filter_amount))}.before-after--content{position:absolute;z-index:1;width:auto;height:auto;bottom:0;left:0;padding:12px 16px;display:flex;flex-direction:column;pointer-events:none}.before-after--content.position-center,.before-after--content.position-end{justify-content:flex-end}.before-after--overlay .before-after--content{text-align:right;left:auto;right:0}.before-after--heading{font-family:var(--heading_font_family),sans-serif;font-size:clamp(20px,3vw,28px);font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);margin:0;line-height:1}.before-after--subheading{color:var(--image_overlay_heading);font-size:12px}.before-after--subheading+.before-after--heading{padding-top:4px}.before-after--drag{position:absolute;z-index:1;display:block;inset-block-start:0;inset-inline-start:var(--percent);height:100%;width:44px;margin-inline-start:-22px;cursor:col-resize}.before-after--wrapper.animating .before-after--drag{transition:.7s cubic-bezier(.7,0,.3,1);transition-property:inset-block-start,inset-inline-start}.before-after--drag:before,.before-after--drag:after{content:"";z-index:-1;position:absolute;background-color:var(--image_overlay_heading);width:2px;height:50%;inset-inline-start:50%;margin-inline-start:-2px}.before-after--drag:after{inset-block-end:0}.before-after--drag:before{inset-block-start:0}.before-after--drag-cursor{inset-block-start:50%;inset-inline-start:50%;width:48px;height:48px;margin-inline-start:-24px;margin-block-start:-24px;border-radius:50px;background-color:var(--image_overlay_heading);position:absolute;display:flex;align-items:center;justify-content:center}.before-after--drag-cursor:after{content:"";background:var(--image_overlay_heading);position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:100%;transform:scale(1.7);opacity:.25}.before-after--drag-cursor svg{width:10px;height:auto}@media(max-width:991px){.before-after--drag-cursor{width:32px;height:32px;margin-inline-start:-16px;margin-block-start:-16px}.before-after--drag-cursor:after{transform:scale(1.5)}}@media(max-width:767px){.before-after--content{padding:10px 12px}.before-after--heading{font-size:18px}}
/*# sourceMappingURL=/cdn/shop/t/57/assets/before-after.css.map */