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

.container {
	display: grid;
	grid-template-columns: 1fr minmax(100px,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: 500px) {

.item {
	grid-column: initial;
}

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

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

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

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

 }