personal-site/src/Grid.css

.grid-container {
	background: #bad4ff;
	max-width: 120rem;
	margin: 0 auto;
}

.grid-item {
	background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
	position: relative;

	float: left;

	width: 30rem;
	min-width: 25rem;
	min-height: 25rem;
	padding-bottom: 30rem;
}

.grid-item-content {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 1rem;
}

@media all and (max-width: 120rem) {
	.grid-item {
		width: 25%;
		padding-bottom: 25%
	}
}

@media all and (max-width: 102rem) {
	.grid-item {
		width: 33.33%;
		padding-bottom: 33.33%;
	}
}

@media all and (max-width: 76.5rem) {
	.grid-container {
		max-width: 68rem;
	}
	.grid-item {
		width: 50%;
		padding-bottom: 50%;
	}
}

@media all and (max-width: 51rem) {
	.grid-container {
		max-width: 34rem;;
	}
	.grid-item {
		width: 100%;
		padding-bottom: 100%;
	}
}