.comparer-container{width:100%;max-width:80%;height:auto;aspect-ratio:1/1;position:relative;margin:1rem;box-shadow:-1px 23px 49px -3px rgba(34,60,80,.4);border-radius:14px;overflow:hidden}.comparer-bg{background:#474747;background-size:cover;background-repeat:no-repeat;background-position:0;width:100%}.comparer-bg,.comparer-fg{object-fit:cover;position:absolute;top:0;left:0;height:100%}.comparer-fg{background:#adadad;background-size:cover;background-repeat:no-repeat;background-position:0;width:50%}.comparer-range{opacity:0;position:absolute;width:100%;height:100%;z-index:2;cursor:col-resize}.comparer-handler{width:1rem;height:2rem;background-color:#fff;position:absolute;border-radius:15px;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:2px 2px 12px rgba(0,0,0,.5);transition:width .2s ease,height .2s ease,opacity .2s ease;opacity:0}.comparer-handler.active{width:1.2rem;height:2.2rem;opacity:1}.comparer-upload-container{display:flex;align-items:center;justify-content:center;height:100px;width:100%}.comparer-btn{padding:.8rem;border-radius:6px;cursor:pointer;margin:.8rem;transition:all .1s ease;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.2);color:gray;border:2px solid gray}.comparer-btn:hover{filter:brightness(1.1)}.comparer-btn.full{color:#fff;background-color:#05da88}.comparer-btn:focus{outline:none}.comparer-btn:active{transform:translateY(3px);box-shadow:0 2px 6px rgba(0,0,0,.4)}.comparer-drop-area{box-sizing:border-box;border:4px dashed #ccc;border-radius:20px;width:350px;max-width:80%;height:75px;margin:1rem auto 2rem;padding:22px 20px;display:flex;align-items:center;justify-content:center}.comparer-drop-inner{margin:auto;text-align:center;color:gray;height:100%}.comparer-drop-area.highlight{border-color:#05da88}