dbtfy-before-and-after{cursor:col-resize}dbtfy-before-and-after[data-layout=vertical]{cursor:row-resize}.dbtfy-before-after{display:flex;overflow:hidden;position:relative;width:100%;z-index:9}.before-after__label{min-width:150px;padding:var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing);position:absolute;text-align:center;width:25%;z-index:100}.before-after__label.left-top{left:0;top:0}.before-after__label.left-middle{left:0;top:50%;transform:translateY(-50%)}.before-after__label.left-bottom{bottom:0;left:0}.before-after__label.right-top{right:0;top:0}.before-after__label.right-middle{right:0;top:50%;transform:translateY(-50%)}.before-after__label.right-bottom{bottom:0;right:0}.before-after-img{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.before-after-img.foreground-img{clip-path:inset(0 0 0 var(--position))}.before-after-box-background,.before-after__label-wrapper{height:100%;position:relative;z-index:0}.before-after-box-background img,.before-after-box-background svg{background-color:rgb(var(--color-background));background:var(--gradient-background);height:100%;object-fit:cover;transform:translateZ(0);transition:opacity .15s linear;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.before-after--handle{display:block;height:100%;left:var(--position);position:absolute;transition:var(--transition-hover);width:3px;z-index:0}.before-after--handle-icon{align-items:center;border-radius:100%;content:"";display:inline-flex;font-size:26px;height:4.4rem;justify-content:center;left:50%;line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%);transform-origin:0 0;width:4.4rem}[data-layout=vertical] .before-after--handle{bottom:var(--position);height:3px;left:0;width:100%}[data-layout=vertical] .before-after-img.foreground-img{clip-path:inset(calc(100% - var(--position)) 0 0 0)}@media (max-width:767px){.before-after__label{padding:var(--grid-mobile-vertical-spacing) var(--grid-mobile-horizontal-spacing)}}