#hex-overlay {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='28' height='49' viewBox='0 0 28 49' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1' /%3E%3Cpath id='path1' style='fill:%23000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1' d='M 12.980469,0 V 7.5 L 0,15 V 33.5 L 12.980469,41 v 8 H 15 V 41 L 27.990234,33.5 H 28 V 15 H 27.9902 L 15,7.5 V 0 Z m 1.009765,9.25 13,7.5 v 15 l -13,7.5 L 1,31.75 v -15 z' /%3E%3C/svg%3E%0A");
  width: 100%;
  height: 100%;
  background-size: 4px;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
}

#body-bg-1 {
  position: absolute;
  height: 250px;
  width: auto;
  opacity: 0.08;
  top: -2%;
  right: -40%;
  transform: rotate(90deg);
  pointer-events: none;
}

#body-bg-2 {
  position: absolute;
  z-index: -1;
  width: 150%;
  opacity: 0.12;
  bottom: -2%;
  right: 0%;
  filter: none;
  pointer-events: none;
}

#body-bg-3 {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 1000px;
  object-fit: cover;
  object-position: left center;
  opacity: 0.2;
  top: 0;
  right: -10%;
  pointer-events: none;
}

#bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
}

#bg-overlay div {
  max-width: 800px;
  height: 100%;
  position: relative;
}

@media (max-width: 1500px) {
  #body-bg-3 {
    right: -30%;
  }
}

@media (max-width: 1300px) {
  #body-bg-3 {
    right: -50%;
  }
}

@media (max-width: 1100px) {
  #body-bg-3 {
    display: none;
  }
}