.c-compare {

  --h: 5;

  --m: 20px 280px;

  --w: 9;

  --thumb-bgc: #9aacb5;

  --thumb-bgc-focus: hsla(219, 7%, 70%, 0.7);

  --thumb-w: 4px;



  margin: var(--m);

  position: relative;

}

.c-compare::after {

  content: "";

  display: block;

  padding-bottom: calc((var(--h) / var(--w)) * 100%);

}

.c-compare__left,

.c-compare__right {

  height: 100%;

  object-fit: cover;

  position: absolute;

  width: 100%;

}

.c-compare__left {

  clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);

}

.c-compare__right {

  clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);

}

.c-compare__range {

  background-color: transparent;

  box-sizing: border-box;

  font-family: inherit;

  height: 100%;

  margin: 0;

  outline: none;

  position: absolute;

  top: 0;

  width: 100%;

}

.c-compare__range::-moz-range-thumb {

  background-color: var(--thumb-bgc);

  cursor: ew-resize;

  height: 100%;

  width: var(--thumb-w);

}

.c-compare__range::-webkit-slider-thumb {

  background-color: var(--thumb-bgc);

  cursor: ew-resize;

  height: 100%;

  width: var(--thumb-w);

}

.c-compare__range:focus::-webkit-slider-thumb {

  background-color: var(--thumb-bgc-focus);

  box-shadow: 0 0 0 1px var(--thumb-bgc);

}

.c-compare__range:focus::-moz-range-thumb {

  background-color: var(--thumb-bgc-focus);

  box-shadow: 0 0 0 1px var(--thumb-bgc);

}

.c-compare__range::-moz-range-track {

  background: transparent;

  background-size: 100%;

  box-sizing: border-box;

}

.c-compare__range::-webkit-slider-runnable-track {

  background: transparent;

  background-size: 100%;

  box-sizing: border-box;

  height: 100%;

}

.c-compare__range,

.c-compare__range::-webkit-slider-runnable-track,

.c-compare__range::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

}