/* Reuse existing hero colour, opacity, crop and theme rules on the first frame. */
[data-bg-video] > picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
[data-bg-video] > picture > img,
[data-bg-video] > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-bg-video][data-bg-playing="false"] > video {
  opacity: 0;
}
[data-bg-video][data-bg-playing="true"] > picture > img {
  visibility: hidden;
}