.container {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: 1fr;
 }

.box {
    background-color: #373737;
    padding: 20px;
}

.nav {
    background: #F4F4F4;
}

.A {
  background: #373737;
}

.B {
  background: #373737;
}

.C {
background: #373737;
}

@media screen and (min-width: 1000px) {

.container {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: 1fr 1fr 1fr;
   }

.box {
      background-color: #373737;
      padding: 20px;
}

.nav {
      grid-column: 1 / 4;
      grid-row: 1;
      background: #F4F4F4;
}

.A {
    grid-column: 1 / 3;
    grid-row: 2;
    background: #373737;
}

.B {
    grid-column: 3 / 3;
    grid-row: 2;
    background: #373737;
}

.C {
  grid-column: 1 / 4;
  grid-row: 4;
  background: #373737;
}

}

ul {list-style-type: none;
   margin: 0;
   padding: 0;
   }

li {
    display: inline;
}

a:link, a:visited {
     color: #373737;
     padding: 14px 25px;
     text-align: center;
     text-decoration: none;
   }

a:hover, a:active {
   background-color: #373737;
   color: #A167A5;
   text-decoration: none;
   }

body {background: #F4F4F4;
      color: #373737;
      font-family: 'Poppins';
      max-width: auto;
      margin: 40px;
}

h2 {color: #373737;
    text-align: center;
    font-size: 50px;
    }