@media (min-width: 761px) {
  .variant-page .scene-video--new-basis {
    top: var(--basis-top);
    left: var(--basis-left);
    width: var(--basis-width);
    height: var(--basis-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }

  .variant-page .scene-video--new-simian {
    top: var(--simian-top);
    left: var(--simian-left);
    width: var(--simian-width);
    height: var(--simian-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }
}

.variant-page--one {
  --basis-top: 25%;
  --basis-left: 6.510417%;
  --basis-width: 19.375%;
  --basis-height: 46.296296%;
  --simian-top: 25.555556%;
  --simian-left: 40.78125%;
  --simian-width: 21.979167%;
  --simian-height: 49.351852%;
}

.variant-page--two {
  --basis-top: 35.802469%;
  --basis-left: 14.479167%;
  --basis-width: 19.375%;
  --basis-height: 46.296296%;
}

@media (max-width: 760px) {
  .variant-page .scene-artboard {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 177.777778svh;
    height: 100svh;
    transform: translate(-50%, -50%);
  }

  .variant-page .scene-layout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .variant-page .scene-video--new-basis {
    position: absolute;
    z-index: 2;
    top: var(--basis-top);
    left: var(--basis-left);
    width: var(--basis-width);
    height: var(--basis-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }

  .variant-page .scene-video--new-simian {
    position: absolute;
    z-index: 2;
    top: var(--simian-top);
    left: var(--simian-left);
    width: var(--simian-width);
    height: var(--simian-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }
}

@media (max-width: 760px) {
  html[data-site-device="desktop"] .variant-page .scene-artboard {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: min(100vw, 177.777778svh);
    height: min(56.25vw, 100svh);
    transform: translate(-50%, -50%);
  }

  html[data-site-device="desktop"] .variant-page .scene-video--new-basis {
    top: var(--basis-top);
    left: var(--basis-left);
    width: var(--basis-width);
    height: var(--basis-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }

  html[data-site-device="desktop"] .variant-page .scene-video--new-simian {
    top: var(--simian-top);
    left: var(--simian-left);
    width: var(--simian-width);
    height: var(--simian-height);
    object-fit: contain;
    object-position: center;
    background: #fff;
  }
}