body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 133%;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-auto-flow: dense;
	gap: 1em 1em;
}

.item {
	padding: .5em;
	grid-column: 1 / -1;
}
@media screen and (min-width: 550px) {
	
.item {
	grid-column: initial;
}

.first {
	grid-column: 1 / span 3;
	background-color: #cac;
}

.second {
	grid-column: 2 / 4;
	background-color: #bba;
}

.third {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	background-color: #abb;
}

.fourth {
	grid-column: 2 / 4;
	background-color: #bab;
}

}