.before-after{position:relative;width:100%;overflow:hidden;max-width:var(--page-width, 1200px);margin:0 auto;border-radius:var(--rounded-default, 8px);--before-after-label-spacing: var(--spacing-5);-webkit-user-select:none;user-select:none}.split-container{position:relative;width:100%;height:auto;overflow:hidden}.split-image-wrapper{position:relative;width:100%;height:100%;aspect-ratio:2 / 1}.split-image{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.split-image-before{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.split-image-after{clip-path:inset(0 0 0 calc(var(--before-after-initial-drag-position, 50%) + var(--clip-path-offset, 0px)));position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.before-after__cursor-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:10}.before-after__cursor{position:absolute;top:0;bottom:0;left:var(--before-after-initial-drag-position, 50%);transform:translate(-50%);cursor:ew-resize;display:grid;place-items:center;pointer-events:auto;touch-action:none;z-index:20;transition:none}.before-after__cursor svg{width:28px;height:35px;display:block}.before-after__cursor:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);height:100%;width:2px;background-color:rgb(var(--background));z-index:1;pointer-events:none}.before-after__cursor:active{cursor:grabbing}.split-label{position:absolute;top:1rem;padding:.4em .8em;font-size:.875rem;font-weight:600;text-transform:uppercase;border-radius:var(--rounded-full, 999px);background-color:#0009;color:#fff;z-index:5;pointer-events:none}.split-label--before{left:1rem}.split-label--after{right:1rem}.before-after__text-wrapper{margin-top:2rem;text-align:var(--text-align, left);color:var(--text-color, inherit)}.before-after__subheading{font-size:.875rem;font-weight:500;opacity:.7;margin-bottom:.5rem}.before-after__heading{font-size:44px;font-weight:700;margin-bottom:1rem}.before-after__description{font-size:16px;line-height:3;bottom:20px}@media screen and (max-width: 749px){.split-image-wrapper{aspect-ratio:1 / 1}.split-label{font-size:.75rem;padding:.3em .6em}.before-after__heading{font-size:33px}.before-after__description{font-size:15px;line-height:1.6;bottom:15px}.before-after__cursor svg{width:24px;height:30px}}@media screen and (min-width: 750px){.before-after{--before-after-label-spacing: var(--spacing-8)}.before-after__cursor svg{width:var(--spacing-10);height:var(--spacing-10)}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/component-before-after.css.map */