.grid {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: space-between;
}	

.grid-col {
	width: calc(1/4*100% - 15px);
	box-sizing: border-box;
}

.grid-thirds .grid-col {
	width: calc(1/3*100% - 13.333333333px);
}

.grid-halves .grid-col {
	width: calc(1/2*100% - 10px);
}

.grid-col:not(.blank) {
	box-shadow: 0 0 5px #eee;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 3px;

	margin-bottom: 20px;
}

@media(max-width: 800px){
	.grid-col {
		width: calc(1/3*100% - 13.333333333px);
	}
	
	.grid-thirds .grid-col {
		width: calc(1/2*100% - 10px);
	}
	
	.grid-halves .grid-col {
		width: 100%;
	}
}

@media(max-width: 600px){
	.grid-col {
		width: calc(1/2*100% - 10px);
	}
	
	.grid-thirds .grid-col {
		width: 100%;
	}
}

@media(max-width: 400px){
	.grid-col {
		width: 100%;
	}

	.grid-col:not(.blank) {
		margin-bottom: 15px;
	}
}