.comparison{--split:50%;position:relative;margin:0 auto;border-radius:10px;overflow:hidden;background:repeating-conic-gradient(#e4e8df 0% 25%,#f6f8f2 0% 50%) 0 0/16px 16px;isolation:isolate}
.comparison>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.comparison-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;transform:translateX(-50%);box-shadow:0 0 4px #0006;pointer-events:none}
.comparison-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:white;color:#314b3a;font-size:19px;box-shadow:0 2px 9px #0003;white-space:nowrap}
.comparison-label{position:absolute;top:12px;background:#172d20b8;color:white;border-radius:5px;padding:6px 9px;font-size:10px;pointer-events:none}.comparison-label-left{left:12px}.comparison-label-right{right:12px}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison:focus-within{outline:3px solid #a4bd74;outline-offset:3px}

.batch-crop-size{margin-top:12px}