/* The picture supplies a responsive poster without downloading a second
   video poster. Keep the video's original inline layout and baseline gap. */
.hero-video-poster {
  position: relative;
}

.hero-video-poster > video {
  opacity: 0;
}

.hero-video-poster > picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.hero-video-poster > picture img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-video-poster.is-playing > video {
  opacity: 1;
}

.hero-video-poster.is-playing > picture {
  visibility: hidden;
}