.before-after-section{display:grid;grid-template-columns:repeat(2,1fr)}.image-with-text-custom-section{display:grid}.image-with-text-custom-section.image-small.layout--image-left{grid-template-columns:2fr 3fr}.image-with-text-custom-section.image-small.layout--image-right{grid-template-columns:3fr 2fr}.image-with-text-custom-section.image-medium.layout--image-left,.image-with-text-custom-section.image-medium.layout--image-right{grid-template-columns:1fr 1fr}.image-with-text-custom-section.image-large.layout--image-left{grid-template-columns:3fr 2fr}.image-with-text-custom-section.image-large.layout--image-right{grid-template-columns:2fr 3fr}.before-after-heading{font-size:48px;line-height:56px;margin:0 0 8px}.before-after-subheading{font-size:20px;line-height:28px}.before-after-section ul{margin-top:32px}.before-after-section ul li{display:flex;gap:10px}.before-after-section ul li+li{margin-top:16px}.before-after-section ul li svg{width:11px;margin-top:5px}.before-after-content{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:64px}before-after{display:grid;place-items:center;align-self:center;grid-template-columns:1fr;grid-template-rows:auto;position:relative;width:100%;height:100%;--divider-width: 2px}before-after .first-image,before-after .second-image{grid-column:1;grid-row:1;width:100%}before-after .divider-control{grid-column:1;grid-row:1;width:var(--divider-width);height:100%;position:absolute;top:0;left:var(--pos, 50%);background-color:var(--color-white);cursor:grab}before-after .divider-control svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}before-after .divider-control.dragging{cursor:grabbing}before-after .divider-control:before{content:"";position:absolute;left:calc(var(--divider-width) / 2);top:0;width:calc(100% + 40px);height:100%;transform:translate(-50%)}before-after .slide-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:40px;border:1px solid var(--color-close-button);background-color:var(--color-white)}before-after .first-image picture,before-after .second-image picture{position:absolute;width:100%;height:100%;top:0;left:0}before-after .second-image picture{-webkit-clip-path:inset(0 0 0 var(--crop, 50%));clip-path:inset(0 0 0 var(--crop, 50%))}@media screen and (max-width: 1024px){.before-after-section{grid-template-columns:1fr}.image-with-text-custom-section.layout--image-right,.image-with-text-custom-section.layout--image-left{grid-template-columns:1fr!important}.before-after-content{padding:32px 16px}.before-after-section ul{margin-top:16px}.before-after-heading{font-size:32px;line-height:40px}.before-after-subheading{font-size:16px;line-height:24px}}
/*# sourceMappingURL=/cdn/shop/t/102/assets/section-before-after.css.map */