.before-after__img-wrapper{position:relative;overflow:hidden;user-select:none}.before-after__img-main,.before-after__img-overlay{background:var(--image-bg);overflow:hidden;border-radius:var(--image-radius)}.before-after__img-overlay{clip-path:inset(0 0 0 calc(var(--dragStartPosition, 50%) + var(--imageClipPosition, 0px)));position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}.before-after__img-label{position:absolute;z-index:1}.before-after__img-label{background:var(--body-alternate-bg);padding:5px 15px}.before-after__img-label[class*="left"]{left:0}.before-after__img-label[class*="right"]{right:0}.before-after__img-label[class*="top"]{top:0}.before-after__img-label[class*="bottom"]{bottom:0}.before-after__img-drag{position:absolute;top:0;bottom:0;left:0;right:0}.before-after__drag-point{height:100%;width:max-content;touch-action:none;transform:translate(calc(1 * -50% + var(--imageClipPosition, 0px)),-50%);cursor:grab;place-items:center;display:grid;position:relative;z-index:1}.before-after__drag-point{top:50%}.before-after__drag-point{left:var(--dragStartPosition,0)}.before-after__drag-point{right:var(--dragStartPosition,0)}.before-after__drag-point:before{position:absolute;content:"";height:100%;width:2px;background:#fff;z-index:-1}.before-after__drag-cursor{width:32px;height:32px;background:#fff;border-radius:100%;display:flex;align-items:center;justify-content:center;padding:5px;color:#000}@media (min-width:768px){.before-after__drag-cursor{width:52px;height:52px}}@media (max-width:767px){.before-after__img-label{font-size:var(--h6)}.before-after__drag-cursor svg{width:20px}}@media (max-width:575px){.before-after__img-label{font-size:var(--text)}}