.video-hero {
  height: calc(100vh - 75px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.video-hero #homepage-hero-video {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-hero #homepage-hero-video,
  .video-hero #homepage-hero-image img {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
    max-width: none;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-hero #homepage-hero-video,
  .video-hero #homepage-hero-image img {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
    max-width: none;
  }
}

.video-hero #homepage-hero-video-play,
.video-hero #homepage-hero-video-pause {
  background: #d14732;
  z-index: 31;
}
.video-hero #homepage-hero-video-play svg,
.video-hero #homepage-hero-video-pause svg {
  fill: #fff;
  height: 1rem;
  width: 1rem;
}

.video-hero #homepage-hero-image {
  transition-property: opacity;
  transition-duration: 0.1s;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-hero #homepage-hero-image.opacity-0 {
  transition-duration: 0.1s;
}

/* video hero overlay */
.video-hero #homepage-hero-overlay {
  background: linear-gradient(to bottom, rgba(0, 87, 184, 1), rgba(0, 87, 184, 0.82) 20%);
  z-index: 30;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}

.video-hero #homepage-hero-overlay.active {
  visibility: visible;
  opacity: 1;
}

.video-hero #homepage-hero-links .links-label {
  white-space: nowrap;
}
.video-hero #homepage-hero-links .links-label::after {
  width: 57px;
  display: inline-block;
  border-bottom: 2px solid #e77530;
  line-height: 0;
  margin: 0 1rem 0.5rem 1rem;
  content: '';
}

.video-hero #homepage-hero-links a {
  padding: 0.75rem 1.5rem;
  background: #fecb34;
  color: #004C97;
  border-bottom-width: 0.125rem;
  border-color: transparent;
  margin: 0.5rem;
  display: inline-block;
}
.video-hero #homepage-hero-links a:hover {
  color: #fecb34;
  background: #004C97;
}

#homepage-hero-mute-message {
  z-index: 89;
}

@media screen and (min-width: 1280px) {
  .video-hero #homepage-hero-overlay {
    padding-left: calc((100vw - 1150px) / 2);
    padding-right: calc((100vw - 1150px) / 2);
  }
}