body {
   margin: 0;
   padding: 0;
   background: #fff;
   font: 10px/13px 'Lucida Sans',sans-serif;
}
.box {
   float: left;
   position: relative;
   margin-bottom: 50px;
   text-align: center;
}
.box img {
   width: auto;
   max-width: 100%;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      clear: left;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
   }
   .box:nth-child(2n+3) {
	   clear: left;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
   }
   .box:nth-child(3n+4) {
	   clear: left;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
   }
   .box:nth-child(4n+5) {
	   clear: left;
   }
}