:host,
:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host {
  display: inline-block;
}

:host {
  height: calc(var(--sectionHeight) * 1px);
  display: block;
}

:host .container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
  perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
  will-change: perspective-origin;
  transform: translate3d(0, 0, 0);
}

:host .scene {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cameraZ) * 1px));
  will-change: transform;
}

:host ::slotted(midwest-scroll-z-section) {
  position: absolute;
  display: block;
  height: auto;
  width: 100%;
  top: 20%;
  z-index: 2;
}

@media only screen and (min-width: 600px) {
  :host ::slotted(midwest-scroll-z-section) {
    width: 75%;
    left: -25%; 
  }
}

@media (prefers-reduced-motion) {
  :host {
    height: auto;
  }

  :host .container {
    position: initial;
    perspective: initial;
    perspective-origin: initial;
    will-change: perspective-origin;
    transform: initial;
    height: auto;
  }

  :host .scene {
    position: initial;
    transform-style: preserve-3d;
    transform: initial;
    height: auto;
  }

  :host ::slotted(midwest-scroll-z-section) {
    position: initial;
    width: auto;
    transform: initial !important;
    height: auto;
  }
}