* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.container-1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.grid-col-1of2 {
  flex-grow: 1;
  flex-basis: 100%;
  padding: 0.25em 0 0.25em 0;
}

.icon-col-1of4 {
  display: inline-flex;
  flex-grow: 1;
  padding: 1em;
  max-width: 75px;
  max-height: 75px;
}

nav .grid-col-1of4 {
  flex-grow: 1;
  flex-basis: 100%;
}

@media (min-width: 18.75em) {
  nav .grid-col-1of4 {
    flex-basis: 100%;
  }
}

@media (min-width: 25em) {
  nav .grid-col-1of4 {
    flex-basis: 50%;
  }

  .grid-col-1of2 {
    flex-basis: 100%;
    margin-left: 1em;
    margin-right: 1em;
  }
}

@media (min-width: 40em) {
  nav .grid-col-1of4 {
    flex-basis: 25%;
  }

   .grid-col-1of2 {
    flex-basis: 100%;
    margin-left: 1em;
    margin-right: 1em;
  }
}

@media (min-width: 50em) {
  .grid-col-1of2 {
   flex-basis: 33%;
 }
}