.grid {
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	margin: 0 auto;
}

.grid--item {
	margin: 5px;
	padding: 20px;
}

.grid--item:first-child:nth-last-child(1),
.grid--item:first-child:nth-last-child(1) ~ div {
	width: 100%;
}

.grid--item:first-child:nth-last-child(2),
.grid--item:first-child:nth-last-child(2) ~ div {
	width: 50%;
}

.grid--item:first-child:nth-last-child(3),
.grid--item:first-child:nth-last-child(3) ~ div {
	width: 33.3%;
}

.grid--item:first-child:nth-last-child(4),
.grid--item:first-child:nth-last-child(4) ~ div {
	width: 25%;
}

.grid--item:first-child:nth-last-child(5),
.grid--item:first-child:nth-last-child(5) ~ div {
	width: 20%;
}

.grid--item:first-child:nth-last-child(6),
.grid--item:first-child:nth-last-child(6) ~ div {
	width: 16.6%;
}

.grid--item:first-child:nth-last-child(7),
.grid--item:first-child:nth-last-child(7) ~ div {
	width: 14%;
}

.grid--item:first-child:nth-last-child(8),
.grid--item:first-child:nth-last-child(8) ~ div {
	width: 12.5%;
}

@media (max-width: 800px) {
	.grid {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.grid--item {
		width: 100% !important;
	}
}