.text-overlay {
  max-width: fit-content;
  max-height: fit-content;
}
.middle_items {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}

.middle_items > * > img {
    width: 110%;
    object-fit: contain;
}

@media (max-width: 1110px) {
  nav {
    min-height: 30%;
    flex-direction: column;
    padding-bottom: 0;
  }
  .start_items {
    position: static;
    width: 100%;
    justify-content: center;
    padding: 0;
  }
  body
  {
    margin-top: 20vh; /* matches nav height */
  }

  .background_container {
    width: 90vw;
    margin-top: 16vw;
    padding: 4vw 2vw;
    flex-direction: column;
  }
  .text-overlay > h1 {
    font-size: clamp(1.2rem, 7vw, 2.2rem);
  }
  .text-overlay > p {
    font-size: clamp(0.8rem, 4vw, 1.2rem);
  }
  .button {
    width: clamp(2.5rem, 40vw, 4rem);
    margin: 2vw 0;
  }

  footer.container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2vw;
    padding: 3vw 0;
  }
  .page_text_icon {
    margin-top: 30px;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .text-overlay {
    padding: 3vw 6vw;
  }
  .button {
    width: clamp(3rem, 7vw, 6rem);
    font-size: 1.1em;
  }
  .page_icon,
  .page_text_icon {
    max-width: 8vw;
    max-height: 90px;
  }
  .start_items {
    padding-bottom: 10rem;
  }
}


@media (max-width: 1200px) and (min-width: 700px) {
  .background_container{
    flex-direction: column !important;
  }
}
@media (max-width: 1200px) {
  .img-grid {
    grid-template-columns: repeat(2, 30vw) !important;
    grid-template-rows: repeat(3, 30vw) !important;
  }
}
.img-grid {
  gap: 1vw;
  display: grid;
  grid-template-columns: repeat(3, 20vw);
  grid-template-rows: repeat(2, 20vw);
  overflow: visible;
}
.img-grid > img {
  width: 100%;
  object-fit: contain;
}
.box {
  max-width: 100%;
}