#Grid{
	text-align: justify;
	font-size: 0.1px; /*hide whitespace between elements*/
}

#Grid li{
	display: inline-block;
	width: 23%;
	font-size:20px;
}

#Grid .break{
	width: 100%;
	height: 0;
}

#Grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 800px){
  #Grid li{
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 600px){
  #Grid li{
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 400px){
  #Grid li{
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}