.square {
  box-sizing: border-box;
  float: left;
  width: 25%;
  padding-bottom: 25%; 
  border-left: 10px solid transparent; /* Space between squares */
  position: relative;
}
.sq-1w {
  /* Just for comleteness. */
}
.sq-2w {
  width: 50%;
}
.sq-3w {
  width: 75%;
}
.sq-4w {
  width: 100%;
}
.square > div {
  box-sizing: border-box;
  background-color: #ccc;
  position: absolute;
  width: 100%;
  height: 100%;
  height: calc(100% - 10px); /* Must be the same value as border-left in ".square" */ 
  top: 0;
  left: 0;
  padding: 10px;
}
.sq-row {
  margin-left: -10px;
  clear: left;
}
.square p{ /* Vertical Alignment of P-Tags */
	margin: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
@media screen and (max-width: 767px){
	.square{
		width: 50%;
	}
	.sq-3w, .sq-3w + .sq-1w, .sq-3w + .square{
		width: 100%;
	}
	.square p{
		font-size: 0.8em;
	}
}
@media screen and (max-width: 520px){
	.square, .square.sq-1w, .square.sq-2w, .square.sq-3w, .square.sq-4w{
		width: 100%;
		margin-bottom: 10px;
		padding-bottom: 0;
	}
	.square > div{
		position: static;
		padding: 20px;
	}
	.square p{
		position: static;
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
}