.grid-container {
  overflow: hidden;
  position: relative;
  width: 100vw;
  overflow-x: hidden;
}

.grid {
  left: 0;
  width: 100vw;
  height: 130vh;
  position: absolute; /* IMPORTANT */
  overflow: hidden;
  z-index: -1;
}

.grid-overlay-hero {
  width: 190%;
  height: 100%;
  opacity: 0.4;
  background-image: linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
}

@media (min-width: 550px) {
  .grid {
    left: 0;
    height: 100vh;
  }
}

@media (min-width: 750px) {
  .grid {
    height: 100vh;
  }
}

@media (min-width: 900px) {
  .grid {
    height: 110vh;
  }
}

@media (min-width: 1024px) {
  .grid {
    height: 120vh;
  }
}

@media (min-width: 1200px) {
  .grid {
    /* left: 10%; */
  }
}