.wayne-interactive-hero {
  --wayne-header-offset: 100px;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: var(--wayne-viewer-height, calc(100vh - var(--wayne-header-offset)));
  height: var(--wayne-viewer-height, calc(100dvh - var(--wayne-header-offset)));
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #000;
}

.wayne-interactive-hero__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

@media (max-width: 767px), (max-aspect-ratio: 4 / 5) {
  .wayne-interactive-hero {
    --wayne-header-offset: 80px;
    height: var(--wayne-viewer-height, calc(100vh - var(--wayne-header-offset)));
    height: var(--wayne-viewer-height, calc(100lvh - var(--wayne-header-offset)));
    min-height: var(--wayne-viewer-height, calc(100vh - var(--wayne-header-offset)));
    min-height: var(--wayne-viewer-height, calc(100lvh - var(--wayne-header-offset)));
  }
}