@media (max-width: 1100px) {
  html {
    font-size: 12px !important;
  }
  div.landing-page .mobile-flex-direction-column {
    flex-direction: column !important;
    gap: 4rem !important;
  }
  header {
    gap: 2rem !important;
    top: 2rem !important;
    left: 2rem !important;
  }
  .menu h2 a {
    padding: 0.75rem 1.25rem !important;
  }
  .menu {
    margin-left: -1rem !important; 
  }
  .hero {
    min-height: calc(100vh - 10rem) !important;
    max-width: calc(100vw - 4rem) !important;
    max-height: 500vh !important;
  }
  body {
    padding: 2rem !important;
  }
  .text {
/*     height: calc(100vh - 12rem) !important; */
    height: auto !important;
  }
  .banner-image {
    width: auto !important;
    margin-top: 1rem !important;
  }
  .mobile-center {
    text-align: center !important;
  }
  h4.mobile {
    display: block !important;
    margin: 4rem 0;
  }
  div.scroll-stick.desktop {
    display: none !important;
  }
  div.scroll-for-work {
    padding-top: 2.5rem !important;
  }
    footer {
    text-align: center !important;
    flex-direction: column !important;
  }
  footer div {
    width: 100% !important;
  }
  div.lot-of-things {
    flex-direction: column !important;   
}
.lot-of-things h2 {
  margin-left: 0 !important;
  margin-bottom: 2rem !important;
}
  .lot-of-things h1 {
    margin-bottom: 0 !important;
  }
  
  div.release, div.table-heading {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important; 
    margin-bottom: 2rem !important;
  }
  div.table-heading {
    top: -6rem !important;
    height: 18rem !important;
    justify-content: end !important;
    padding-bottom: 1rem;
  }
  div.table-heading h5, div.release p {
    margin: 0 !important;
  }
  
  h5 {
    font-size: 2rem !important;
  }
  div.release p {
    padding: 0.5rem 0 0 0 !important;
  }
    .projects {
    grid-template-columns: 1fr !important;
  }
}