@media (min-width: 1181px) {
  .hero-product {
    width: min(58vw, 820px);
  }
}

#opening { z-index: 1; }
#positioning { z-index: 2; }
#dashboard { z-index: 3; }
#matchday { z-index: 4; }
#academia { z-index: 5; }
#comunicacao { z-index: 6; }
#assistant { z-index: 7; }
#epilogue { z-index: 8; }

.demo-has-topbar .site-header { top: calc(var(--demo-topbar-height) + 18px); }
@media (max-width: 700px) {
  .demo-has-topbar .site-header { top: calc(var(--demo-topbar-height) + 8px); }
}