/* Keep the original jungle image in the established responsive hero layout.
   The optional photographic-flame animation is currently disabled. */
.hero-artboard {
  position: absolute;
  inset: 0;
  z-index: -3;
  container-type: size;
  pointer-events: none;
}

.hero-scene {
  position: absolute;
  left: 90%;
  top: 54%;
  width: max(100cqw, 177.683316cqh);
  aspect-ratio: 1672 / 941;
  transform: translate(-90%, -54%);
}

.hero-scene > .hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: center;
  z-index: auto;
}

@media (min-width: 1700px) {
  .hero-scene {
    left: 50%;
    top: 56%;
    transform: translate(-50%, -56%);
  }
}

@media (max-width: 700px) {
  /* Give the scene its own readable space below the copy on small screens. */
  .hero-copy {
    padding-bottom: 390px;
  }

  .hero-artboard {
    top: auto;
    bottom: 65px;
    height: 420px;
  }

  .hero-scene {
    left: 90%;
    top: 50%;
    transform: translate(-90%, -50%);
    /* Fade the original photograph into the surrounding section. */
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent);
  }
}