.video-hero {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.video-hero__media,
.video-hero__poster,
.video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-hero__poster,
.video-hero__video {
  display: block;
  object-fit: cover;
}

.video-hero__video {
  pointer-events: none;
}

.video-hero[data-unavailable] .video-hero__video {
  visibility: hidden;
}