.hero-background-image {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  opacity: 0.6;
  filter: brightness(0.8) contrast(1.2);
}

.hero-mobile-bg {
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  opacity: 0.6;
  filter: brightness(0.8) contrast(1.2);
}

@media screen and (max-width: 767px) {
  .hero-background-image,
  .hero-mobile-bg {
    height: 110%;
  }
}