.xo-hotspot {
  position: relative;
  width: 100%;
  height: 100%;
}

.xo-hotspot__bg {
  width: 100%;
  height: 100%;
}
.xo-hotspot__bg .xo-image {
  height: 100%;
  width: 100%;
}
.xo-hotspot__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  z-index: -1;
}

.xo-hotspot__point {
  position: absolute;
  top: calc(var(--top) * 1%);
  left: calc(var(--left) * 1%);
  transform: translate(-50%, -50%);
}