.projet-compare-container {
  display: grid;
  background-color: #222;

  > * {
    grid-area: 1 / 1;
  }

  > .projet-compare-left,
  .projet-compare-right {
    display: grid;
    place-content: center;
  }

  .projet-compare-left {
    -webkit-mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
    mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
  }

  .projet-compare-right {
    -webkit-mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
    mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
  }

  > input[type="range"] {
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      inline-size: 4px;
      block-size: 100%;
      background-color: CanvasText;
    }

    &::-moz-range-thumb {
      -moz-appearance: none;
      appearance: none;
      inline-size: 4px;
      block-size: 100%;
      background-color: CanvasText;
    }
  }

  img {
    max-block-size: 100%;
    max-inline-size: 100%;
  }
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: none;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: none;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: none;
  border-radius: 25px;
  border: 0px solid #000101;
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: none;
  cursor: pointer;
}

@media only screen and (max-width: 1200px) {
  .projet-compare-container {
    display: none;
  }
}