body.page-template-home .heroSection__imageContainer {
  position: relative;
  overflow: hidden;
  container-type: size;
}

/* When the hero shows a video, don't render the default background image. */
body.page-template-home .heroSection__imageContainer--video {
  background: none;
}

body.page-template-home .heroSection__video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Fallback for browsers without container query units (e.g. older iOS Safari):
     without this the iframe collapses to its default 300x150 box. */
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

@supports (width: 1cqw) {
  body.page-template-home .heroSection__video {
    width: max(100%, 177.78cqh);
    height: max(100%, 56.25cqw);
  }
}