.eluna-cylinder-gallery {
  position: relative;
  height: 620svh;
  min-height: 0;
  overflow: visible;
  contain: none;
}

.eluna-cylinder-gallery::before,
.eluna-cylinder-gallery::after,
.eluna-cylinder-gallery .hero-image-orbit__stage::before,
.eluna-cylinder-gallery .hero-image-orbit__stage::after {
  display: none;
}

.eluna-cylinder-gallery .hero-image-orbit__stage {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 58% 44%, rgba(255, 255, 255, 0.98) 0 13%, rgba(238, 245, 247, 0.72) 43%, rgba(207, 221, 226, 0.48) 78%, transparent 100%),
    #e4ecef;
  isolation: isolate;
}

.eluna-cylinder-gallery__viewport {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.eluna-cylinder-gallery__viewport canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.eluna-cylinder-gallery .hero-image-orbit__title,
.eluna-cylinder-gallery .hero-image-orbit__status {
  z-index: 6;
}

.eluna-cylinder-gallery .hero-image-orbit__status-progress span {
  transform: scaleX(var(--cylinder-progress, 0));
}

.eluna-cylinder-gallery.eluna-cylinder-gallery--unfold {
  height: var(--unfold-release-height, 740svh);
  overflow-anchor: none;
}

.eluna-cylinder-gallery--unfold .eluna-cylinder-gallery__viewport {
  inset: 0;
}

@media (max-width: 900px) {
  .eluna-cylinder-gallery {
    height: 620svh;
  }

  .eluna-cylinder-gallery__viewport {
    inset: 12% -20% -2%;
  }
}

@media (min-width: 601px) and (max-height: 600px) {
  .eluna-cylinder-gallery--unfold .hero-image-orbit__title {
    top: 50%;
    right: auto;
    left: 5vw;
    width: 31vw;
    transform: translateY(-50%);
  }

  .eluna-cylinder-gallery--unfold .hero-image-orbit__status {
    top: 24px;
    right: 6vw;
    bottom: auto;
    width: 28vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eluna-cylinder-gallery,
  .eluna-cylinder-gallery.eluna-cylinder-gallery--unfold {
    height: 140svh;
  }
}