#smallbox {
  height: auto;
  
}
#smallbox2 {
  height: 355px;
}

/* Add styling to each box containing the class 'smallbox' */
.smallbox {
  margin-bottom: 0%;
 /* background-color: rgb(230, 11, 11); */
  min-height: 10px;
  padding-right: 0px;
  
}

/* ==========================================================================
   Add styling to mobile devices. Mobile First Approach
   ========================================================================== */

/* Ref: https://developer.mozilla.org/en-US/docs/Glossary/Mobile_First
   ========================================================================== */

    @media only screen and (min-width: 700px) {
      
      /* Add mobile only styling to each box containing the class 'smallbox' */
      .smallbox {
        width: 49.076923076923077%;
       float: left;
        margin-left: 1.064102564102564%;
		
      }


      /**
       * Add styling to each 4th box starting with the first (4n + 1).
       *
       * [(4×0)+1] = 01
       * [(4×1)+1] = 05
       * [(4×2)+1] = 09
       * [(4×3)+1] = 13
       *  
       * And so forth...
       *
       * Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
       * Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
       */

      .smallbox:nth-of-type(2n + 1) {
        margin-left: 5px;
        clear: both;
      }

    }