.image-zoom {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  height: max-content;
  position: relative;
  cursor: zoom-in;
  width: 100%;
}

.image-zoom img {
  position: relative;
  z-index: 1;
}

.image-zoom-block {
  display: none;
  width: 50%;
  height: 50%;
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: 600%;
  background-position: var(--x) var(--y);
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform:
    translateX(calc(var(--x) * -1))
    translateY(calc(var(--y) * -1));
  z-index: 2;
  pointer-events: none;
}

.image-zoom.-active {
  cursor: zoom-out;
}

.image-zoom.-enter .image-zoom-block {
  display: block;
}