body {
  font-family: sans-serif;
  font-size: 18px;
  margin: 0;
}

.menu {
  background-color: black;
  color: white;
  font-family: serif;
  font-size: 1.2em;
  text-align: center;
  padding: 0.5em 0;
}
.menu a {
  text-decoration: none;
  color: #fff;
}
.menu a.selected {
  text-decoration: underline;
}
.menu .logo {
  font-weight: bold;
}

.footer {
  background-color: yellow;
  color: black;
  text-align: center;
  font-size: 0.9em;
  font-family: serif;
  padding: 0.5em;
}
.footer img {
  width: 50px;
}
.articles {
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5em 1em;
}

.article .image {
  margin: 0 0 0.4em 0;
}
.article .image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #eee;
}
.article .headline {
  margin: 0 0 0.3em 0;
}
/* Below 612px the grid is one column — 2 x 280px columns plus the 1em gap need
   576px of track, inside 1em of padding either side. The tile then goes full
   width under a much larger image, and an 18px headline reads small against it. */
@media (max-width: 611px) {
  .article .headline {
    font-size: 1.2em;
    line-height: 1.25;
  }
}
.article .source {
  font-size: 0.8em;
  font-family: serif;
  color: #666;
  float: left;
}
.article .more {
  font-size: 0.8em;
  font-family: serif;
  color: #666;
  float: right;
}
.article a {
  text-decoration: none;
  color: #000;
}