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;
}

}