.scene {
  position: relative;

  width: 100%;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 3rem;

  overflow: hidden;
}

.hero {
  position: relative;

  z-index: 1;

  background: transparent;
}

#scene-01 {
  overflow: hidden;

  isolation: isolate;
}

@media (max-width: 40rem) {
  #scene-01.scene {
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;

    padding: 1.125rem;

    overflow: hidden;
  }

  #scene-02.continuous-experience {
    position: relative;

    z-index: 1;
  }

  #scene-01 .hero-inner {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
  }
}

.hero-inner {
  width: min(100%, var(--hero-max-width));

  display: flex;

  justify-content: center;

  align-items: center;
}
.social {
  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 8rem 2rem;
}

.social-post {
  width: min(760px, 100%);
}

#scene-03.scene {
  display: block;

  align-items: stretch;

  justify-content: flex-start;

  padding: 0;

  overflow: hidden;
}