body {
	font-family: system-ui, sans-serif;
	font: 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 3em;
	row-gap: .5em;
}

.item {
	padding: .5em;
	grid-column: 1 / -1;
}

@media screen and (min-width: 550px) {

.item {
	grid-column: initial;
}


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

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

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

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