body {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  gap: 2em;
}

h1, h2 {
  grid-column: 1 / -1;
}

hgroup {
  margin: 1em;
}

h3, article, section {
  grid-row: span 2;
}
article, section {
  margin: 1em;
}

header,footer {
  grid-column: 1 / -1;
}

header {
  text-align: center;
}

li {
  display: inline;
}



@media (min-width: 30em) { 
  body{
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 50em) { 
  body{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 70em) { 
  body{
    grid-template-columns: repeat(4, 1fr);
  }
}