.before_after{display:grid;grid-template-columns:var(--content-width) 1fr;gap:6rem;align-items:center}.before_after_content_position-right{grid-template-columns:1fr var(--content-width)}.before_after_content_position-right .before_after_content{order:2}.before_after_content_position-right .before_after_media{order:1}.before_after_heading{margin-bottom:2rem}.before_after_heading h2{margin:0}.before_after_description p:last-child{margin-bottom:0}.before_after_media,.before_after_item{width:100%}.before_after_comparison{position:relative;width:100%;overflow:hidden;min-height:870px;-webkit-user-select:none;user-select:none}.before_after_image{position:absolute;top:0;right:0;bottom:0;left:0}.before_after_image img,.before_after_image .placeholder-svg{width:100%;height:100%;display:block;object-fit:cover}.before_after_image svg{background:var(--color-secondary-background)}.before_image{z-index:1}.after_image{z-index:2;clip-path:inset(0 50% 0 0);will-change:clip-path}.after_image img,.after_image .placeholder-svg{position:absolute;top:0;right:0;bottom:0;left:0}.before_after_handle{position:absolute;top:0;bottom:0;width:5px;background:var(--color-arrows-bg);z-index:3;transform:translate(-50%);pointer-events:none}.before_after_dragger{position:absolute;top:180px;left:50%;transform:translate(-50%);width:3.5rem;height:6rem;border:.3rem solid var(--color-arrows-border);background:var(--color-arrows-bg);cursor:ew-resize;pointer-events:all;padding:0}.before_after_dragger:before,.before_after_dragger:after{content:"";position:absolute;top:50%;width:8px;height:1px;background:rgb(var(--color-background));transform:translateY(-50%)}.before_after_dragger:before{left:8px}.before_after_dragger:after{right:8px}.before_after_labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.before_after_wrapper .before_label,.before_after_wrapper .after_label{position:absolute;top:2rem;padding:.8rem 1.4rem;background:rgba(var(--color-background),.9);color:rgba(var(--color-foreground),1);font-size:1.4rem;line-height:1}.before_after_wrapper .before_label{left:2rem}.before_after_wrapper .after_label{right:2rem}.before_after_content_align-start{align-self:start}.before_after_content_align-center{align-self:center}.before_after_content_align-end{align-self:end}.before_after_head_align-center{text-align:center}.before_after_head_align-right{text-align:right}@media screen and (max-width:1440px){.before_after{gap:4rem}.before_after_comparison{min-height:600px}}@media screen and (max-width:1199px){.before_after{grid-template-columns:280px 1fr;gap:3rem}.before_after_content_position-right{grid-template-columns:1fr 280px}.before_after_comparison{min-height:500px}}@media screen and (max-width:989px){.before_after,.before_after_content_position-right{grid-template-columns:1fr}.before_after_content,.before_after_media{order:unset!important}.before_after_content{max-width:60rem;margin:0 auto}.before_after_comparison{min-height:450px}.before_after_dragger{top:140px}}@media screen and (max-width:749px){.before_after{gap:2rem}.before_after_comparison{min-height:350px}.before_after_dragger{width:3rem;height:5rem;top:120px}.before_after_wrapper .before_label,.before_after_wrapper .after_label{top:1rem;font-size:1.2rem;padding:.6rem 1rem}.before_after_wrapper .before_label{left:1rem}.before_after_wrapper .after_label{right:1rem}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/before-after.css.map */