.banner-content__overlay {
  position: relative;
}

{# Image #}
  .banner-content__hero-image {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Place text in the middle of the image */
  .banner-content__text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  padding: 0 0.5rem;
  text-align: center;
  }
/* video */
.background-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   left: 0;
   z-index: -1;
}

@media screen and (max-width: 767px) {
  .background-video {
   width: 100%;
   height: 100%;
   object-fit: contain;
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   background: #404040;
}
}