.page-container {
  display: grid;
  grid-template-columns: calc( 50vw - 40rem ) repeat(12, 1fr) calc( 50vw - 40rem );
  grid-column-gap: 32px;
  position: relative;
}

@media screen and (max-width: 1100px) {
  .page-container {
    grid-template-columns: 40px repeat(12, 1fr) 80px;
    grid-template-rows: min-content min-content min-content 1fr min-content;
  }
}

@media screen and (max-width: 1024px) {
  .page-container {
    grid-template-columns: 0px repeat(12, 1fr) 0px;
  }
}

@media screen and (max-width: 900px){
  .page-container {
    grid-template-rows: min-content min-content min-content min-content 1fr min-content;
  }
}

@media screen and (max-width: 500px){
  .page-container {
    grid-template-columns: 16px repeat(12, 1fr) 16px;
    grid-column-gap: 0;
  }
}

.hidden {
  overflow: hidden;
}