/***GRID***/
.grid{
  display: grid;
}

body {
  margin: 0rem;
}

.nav-col {
  grid-template-columns: 1fr auto;
  width: 100%;
}

.four-col{
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 1.5rem;
}

.two-row{
  grid-template-rows: fit-content() fit-content;
}

.page-container, .footer{
  margin: 2rem;
}

nav a{
  margin-bottom: 1rem;
}

/* APPROXIMATELY 320px */
@media (min-width: 20rem) {
  h1{
    font-size: 1.5rem;
  }

}

/* APPROXIMATELY 640px */
@media (min-width: 40rem) {
  .two-col{
    grid-template-columns: 1fr;
  }

  .three-col{
    grid-template-columns: 1fr;
  }

  .rightbiased-two-col{
    grid-template-columns: 1fr;
  }

  .page-container{
    margin: 3rem 4rem 3rem 4rem;
  }
  
  .footer{
    margin: 4rem;
  }
}

/* APPROXIMATELY 1024px */
@media (min-width: 64rem) {
  .two-col{
    grid-template-columns: 1fr 1fr;
  }

  .three-col{
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .rightbiased-two-col{
    grid-template-columns: 1fr 2fr;
  }

  h1 {
    font-size: 3.5rem;
  }

  nav a{
    margin-bottom: 0rem;
  }
}


/* DISABLE SCROLLBAR PAST A SMALLER SCREEN SIZE */
@media (max-width: 64rem){
  * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  *::-webkit-scrollbar {
    display: none;
  }
}