.before-after-container{margin:0 auto;position:relative;-webkit-user-select:none;user-select:none}.before-after-container,.before-after-image{overflow:hidden;width:100%}.before-after-image img{display:block;height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.before-after-image.after{clip-path:inset(0 0 0 var(--clip-path-percent));height:100%;inset:0;position:absolute;width:100%;z-index:1}.before-after-image.before .hero-placeholder-svg{inset:0;position:absolute}.before-after-image.before .placeholder_svg{background-color:rgba(var(--color-foreground)/.2)}.slider{background:rgba(var(--color-background)/1);bottom:0;left:var(--slider-position);margin-left:-1px;top:0;width:2px;z-index:2}.slider,.slider-button{cursor:ew-resize;position:absolute}.slider-button{background:rgb(var(--color-background));border-radius:50%;box-shadow:0 9px 12px rgba(var(--color-foreground)/.1);height:48px;left:-24px;top:50%;transform:translateY(-50%);width:48px}.before-after-container.transition .before-after-image.after{transition:clip-path .5s ease-in-out}.before-after-container.transition .slider{transition:left .5s ease-in-out}.before-after-container.transition-faster .before-after-image.after{transition:clip-path .15s ease}.before-after-container.transition-faster .slider{transition:left .15s ease}.before .before-after-image__badge{z-index:1}.before-after-image__badge{background:rgba(var(--color-background)/.9);border-radius:var(--btn-border-radius);color:rgb(var(--color-foreground));z-index:2}