.table-grid {
     margin: 1em 0;
}

.table-grid .grid-item {
	padding: 1em;
}

.table-grid .grid-item:nth-of-type(4n+1) {
	background-color: #eeeaef;
}

.table-grid .grid-item:nth-of-type(4n+2) {
	background-color: #fddca6;
}

.table-grid .grid-item:nth-child(4n+3) {
	background-color: #f2f2f2;
}

.table-grid .grid-item:nth-child(4n+4) {
	background-color: #e1eff7;
}

.table-grid .grid-item table {
	background-color: #fff;
}

@media screen and (min-width: 56.25em) {

	.table-grid  {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1em;
	}

	@supports (display: grid) {
		.table-grid  {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}
}