.jxs-video-follow {
  display: block;
}

.jxs-video-follow__viewport {
  position: relative;
  height: 100vh;
}

.jxs-video-follow__video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.jxs-video-follow__video-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
}


.jxs-video-follow__end-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.jxs-video-follow.design-mode .jxs-video-follow__end-image {
  opacity: 1;
}

.jxs-video-follow__item {
  position: absolute;
  width: auto;
  height: auto;
  opacity: 0;
}
.jxs-video-follow__item.hor--left {
  left: var(--x);
}
.jxs-video-follow__item.hor--right {
  right: var(--x);
}
.jxs-video-follow__item.hor--center {
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
}
.jxs-video-follow__item.ver--top {
  top: var(--y);
}
.jxs-video-follow__item.ver--bottom {
  bottom: var(--y);
}
.jxs-video-follow__item.ver--center {
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
}

@media (max-width: 767px) {
  .jxs-video-follow__item.hor--left--mobile {
    left: var(--x-mobile);
    right: unset;
  }
  .jxs-video-follow__item.hor--right--mobile {
    right: var(--x-mobile);
    left: unset;
  }
  .jxs-video-follow__item.hor--center--mobile {
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
  }
  .jxs-video-follow__item.ver--top--mobile {
    top: var(--y-mobile);
    bottom: unset;
  }
  .jxs-video-follow__item.ver--bottom--mobile {
    bottom: var(--y-mobile);
    top: unset;
  }
  .jxs-video-follow__item.ver--center--mobile {
    display: flex;
    align-items: center;
    top: 0;
    bottom: 0;
  }
}