@charset "UTF-8";.before-after__wrapper{--change-ratio: 0}.before-after__wrapper .before-after-main{position:relative;display:block}.before-after__wrapper .before-after-main .before-item{height:100%;position:relative;padding:2rem;background:rgb(var(--color-background))}.before-after__wrapper .before-after-main .before-item .media{position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:100%;z-index:-1;background:rgba(var(--color-foreground),.6)}.before-after__wrapper .before-after-main .before-item .media .placeholder-svg{fill:rgb(var(--color-background))}.before-after__wrapper .before-after-main .after-item{position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;padding:2rem}.before-after__wrapper .before-after-main .after-item .media{position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:100%;z-index:-1}.before-after__wrapper .before-after-main .drag-button{position:absolute;transform:translate(-50%,-50%);z-index:2;cursor:col-resize}.before-after__wrapper .before-after-main .drag-button .icon{width:1rem}.before-after__wrapper .before-after-main:before{content:"";position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:100%;background:rgba(var(--color-foreground),.05)}.before-after__wrapper .before-after-main:after{content:"";position:absolute;background:rgb(var(--color-background));pointer-events:none}.before-after__wrapper .before-after-main.image-height--small{height:25rem}.before-after__wrapper .before-after-main.image-height--medium{height:35rem}.before-after__wrapper .before-after-main.image-height--large{height:45rem}.before-after__wrapper .before-after-main.button--is-dragging .image-heading{animation:fadeOut .3s cubic-bezier(0,0,.3,1) forwards}.before-after__wrapper .before-after-main[data-vertical] .before-item{clip-path:polygon(0 0,100% 0,100% var(--change-ratio),0% var(--change-ratio))}.before-after__wrapper .before-after-main[data-vertical] .button{width:3rem;top:var(--change-ratio);left:50%;cursor:row-resize}.before-after__wrapper .before-after-main[data-vertical]:after{top:var(--change-ratio);left:0;height:3px;width:100%;transform:translateY(-50%)}.before-after__wrapper .before-after-main[data-vertical].enable-transition .button,.before-after__wrapper .before-after-main[data-vertical].enable-transition:after{transition:top .5s cubic-bezier(0,0,.3,1)}.before-after__wrapper .before-after-main:not([data-vertical]) .before-item{clip-path:polygon(0 0,var(--change-ratio) 0,var(--change-ratio) 100%,0 100%)}.before-after__wrapper .before-after-main:not([data-vertical]) .button{height:3rem;left:var(--change-ratio);top:50%}.before-after__wrapper .before-after-main:not([data-vertical]):after{top:0;left:var(--change-ratio);transform:translate(-50%);height:100%;width:3px}.before-after__wrapper .before-after-main:not([data-vertical]).enable-transition .button,.before-after__wrapper .before-after-main:not([data-vertical]).enable-transition:after{transition:left .5s cubic-bezier(0,0,.3,1)}.before-after__wrapper .before-after-main.enable-transition .before-item{transition:clip-path .5s cubic-bezier(0,0,.3,1)}@media screen and (max-width: 749px){.before-after__wrapper .before-after-main.image-height--small{height:15rem}.before-after__wrapper .before-after-main.image-height--medium{height:20rem}.before-after__wrapper .before-after-main.image-height--large{height:30rem}}@media screen and (max-width: 749px){.before-after__wrapper .rich-text-block{margin-block-end:2rem}}@media screen and (min-width: 750px){.before-after__wrapper{display:flex;align-items:stretch;gap:2rem}.before-after__wrapper .rich-text-block{width:calc(50% - 2rem)}.before-after__wrapper .rich-text-block .content-group{position:sticky;inset-block-start:calc(var(--header-height, 5rem) + 1rem)}.before-after__wrapper .before-after-block{flex:1 1 auto}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/section-before-after.css.map */