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 / -1 ;
 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: 1 / 2 ;
	background-color: #bab;
}