.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.37;
}

.hero-bg img {
  min-width: 100%;
  min-height: 100%;
  max-width: unset;
}

.hero-video {
  min-height: 100%;
  min-width: 100%;
  transform: translateX(-50%);
  margin-left: 50%;
}

.hero-content-container {
  padding: 10em 5em;
}

.cta,
.release-date {
  font-size: 3.4em;
  letter-spacing: 0.1em;
  margin: 1em 0;
  text-shadow: 2px 2px 0 #000;
}

.release-date {
  font-size: 2.5em;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  #hero {
    height: 100vh;
    display: flex;
    align-items: center;
  }

  .hero-content-container {
    max-width: 100%;
  }
}