img { /*dummy content*/
  max-width: 100%;
  border: none;
}

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1em;
  grid-auto-flow: dense;
}

.article {
  padding: 1em;
  background: #fff;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 20px 20px rgba(0, 0, 0, 0.05);
}

.article:after {
  color: #808;
  font-weight: bold;
  font-family: courier;
}

@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
  .article {
    margin-bottom: 1em;
  }
}