.images-compare {
    position: relative;
    width: 100%;
}

.images-compare-inner {
    display: flex;
    position: absolute;
    inset: 0;
}

.images-compare .img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.images-compare .img:nth-child(2) {
    clip-path: inset(0px 0px 0px 50%);
}

.images-compare .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.images-compare #line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #fafafa;
}

.images-compare input {
    /* reset */
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    /* custom */
    position: absolute;
    width: calc(100% + 32px);
    height: 100%;
    left: -18px;
}

.images-compare input::-webkit-slider-thumb {
    /* reset */
    -webkit-appearance: none;
    appearance: none;
    /* custom */
    height: 2.25rem;
    width: 2.25rem;
    border: 0.25rem solid #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 height%3D%2224px%22 viewBox%3D%220 -960 960 960%22 width%3D%2224px%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M286.15-293.85 100-479.62l185.77-185.76 42.15 41.76-113 113.62h530.16l-113-113.62 42.15-41.76L860-479.62 674.23-293.85l-42.54-41.77 113.39-114H214.54l113.38 114-41.77 41.77Z%22/%3E%3C/svg%3E');
    background-size: cover;
    cursor: grab;
}

.images-compare input::-moz-range-thumb {
    height: 2.25rem;
    width: 2.25rem;
    border: 0.25rem solid #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 height%3D%2224px%22 viewBox%3D%220 -960 960 960%22 width%3D%2224px%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M286.15-293.85 100-479.62l185.77-185.76 42.15 41.76-113 113.62h530.16l-113-113.62 42.15-41.76L860-479.62 674.23-293.85l-42.54-41.77 113.39-114H214.54l113.38 114-41.77 41.77Z%22/%3E%3C/svg%3E');
    background-size: cover;
    cursor: grab;
}

.images-compare input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.images-compare input:active::-moz-slider-thumb {
    cursor: grabbing;
}