.image-compare {
  position: relative;
  /* height: 100%; */
  overflow: hidden;
}
.image-compare img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
}
.image-2 {
  --exposure: 10%;  
  display: block;
  clip-path: polygon(
    calc(var(--exposure) + 1px) 0, 
    100% 0, 
    100% 100%, 
    calc(var(--exposure) + 1px) 100%
  );
}
.image-2-wrapper {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  filter: drop-shadow(-2px 0 0 rgba(255,255,255,.5));
  height: 100%;
}
.image-compare-label {
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.image-compare-input {
  --thumb-size: clamp(2em, 8vmin, 4em);

  /* Go half a "thumb" off the edge to the left and right" */
  margin: 0 calc(var(--thumb-size) / -2);
  /* Make the input a full "thumb" wider than 100% so it extends past the edges */
  width: calc(100% + var(--thumb-size));
  cursor: col-resize;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  max-width: unset;
  padding: 0;
}

/* Firefox */
.image-compare-input::-moz-range-thumb {
    /* A white background with slight transparency */
    background-color: hsla(0, 0%, 100%, 0.9);
    /* An inline SVG of two arrows facing opposite directions */
    background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M40 20 L50 30 L40 40"/></svg>');
    background-size: 90%;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 2px hsla(0, 0%, 0%, 0.9) solid;
    color: hsla(0, 0%, 0%, 0.9);
    width: var(--thumb-size);
    height: var(--thumb-size);
}
.image-compare-input:focus::-moz-range-thumb {
    box-shadow: 0px 0px 0px 2px hsl(200, 100%, 80%);
}
/* Chrome, Safari and Edge, */
.image-compare-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* A white background with slight transparency */
  background-color: hsla(0, 0%, 100%, 0.9);
  /* An inline SVG of two arrows facing opposite directions */
  background-image: url('data:image/svg+xml;utf8,<svg viewbox="0 0 60 60"  width="60" height="60" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 20 L10 30 L20 40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M40 20 L50 30 L40 40"/></svg>');
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px hsla(0, 0%, 0%, 0.9) solid;
  color: hsla(0, 0%, 0%, 0.9);
  width: var(--thumb-size);
  height: var(--thumb-size);
}

.image-compare-input:focus::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px var(--thumb-border-size) hsl(200, 100%, 80%);
}
.visually-hidden {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* --- NO JS --- */
.no-js .image-compare {
    display: grid;
    gap: var(--wp--preset--spacing--10);
}
.no-js label.image-compare-label {
    display: none;
}
.no-js span.image-2-wrapper {
    position: static;
}
@media screen and (min-width:900px) {
  .no-js .image-compare {
    grid-template-columns: 1fr 1fr;
  }
}