.grid4321 a {
  display: block;
  padding: 10px;
}

.grid4321 a:hover {
  background-color: #0065bd;
  color: #ffffff;
}

.grid4321 div {
  float: left;
  text-align: center;
  width: 25.0%;
}

.grid4321 div:nth-child(4n+1) {
  clear: both;
}

.grid4321 img {
  width: 100%;
  margin: 5px auto;
}

@media only screen and (max-width: 70em) {
  .grid4321 div {
    width: 33.333%;
  }

  .grid4321 div:nth-child(n) {
    clear: none;
  }

  .grid4321 div:nth-child(3n+1) {
    clear: both;
  }
}

@media only screen and (max-width: 40em) {
  .grid4321 div {
    width: 50%;
  }

  .grid4321 div:nth-child(n) {
    clear: none;
  }

  .grid4321 div:nth-child(2n+1) {
    clear: both;
  }
}

@media only screen and (max-width: 25em) {
  .grid4321 div {
    width: 100%;
  }
   
  .grid4321 div:nth-child(n) {
    clear: both;
  }
}

.grid321 a {
  display: block;
  padding: 10px;
}

.grid321 a:hover {
  background-color: #0065bd;
  color: #ffffff;
}

.grid321 div {
  float: left;
  text-align: center;
  width: 33.3%;
}

.grid321 div:nth-child(3n+1) {
  clear: both;
}

.grid321 img {
  width: 100%;
  margin: 5px auto;
}

@media only screen and (max-width: 40em) {
  .grid321 div {
    width: 50%;
  }

  .grid321 div:nth-child(n) {
    clear: none;
  }

  .grid321 div:nth-child(2n+1) {
    clear: both;
  }
}

@media only screen and (max-width: 25em) {
  .grid321 div {
    width: 100%;
  }

  .grid321 div:nth-child(n) {
    clear: both;
  }
}

.grid21 div {
  float: left;
  text-align: center;
  width: 50.0%;
}

.grid21 div:nth-child(even) {
  padding-left: 10px;
}

.grid21 div:nth-child(odd) {
  padding-right: 10px;
}

.grid21 div:nth-child(2n+1) {
  clear: both;
}

@media only screen and (max-width: 40em) {
  .grid21 div {
    width: 100%;
  }

  .grid21 div:nth-child(n) {
    clear: both;
    padding-left: 0;
    padding-right: 0;
  }
}