/* via https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/ */

.page {
  padding: 2em;
  max-width: 1100px;
  margin: 0 auto;
}

.staticMasonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  /* gap: 10px; */
}

.staticMasonry .masonry-stamp {
  grid-column: 4;
  grid-row: 1;
}

.staticMasonryTile {
  width: 90%;
}

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13%, 1fr));
  grid-gap: 3rem;
  grid-auto-flow: dense;
}

.article {
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 20px 20px rgba(0, 0, 0, 0.05);
}


.article:nth-child(1) {
  grid-column: 1 / -1;
}

.article:nth-child(5n + 6) {
  grid-column: -3 / -1;
}

.article:nth-child(5n + 2) {
  grid-column: 1 / 4;
}

.article:nth-child(5n + 3) {
  grid-column: -4 / -1;
}

.article:nth-child(5n + 4) {
  grid-column: 1 / 3;
}

.article:nth-child(5n + 5) {
  grid-column: -5 / -3;
}

.article:nth-child(5n + 2) .bookHeaderBackground,
.article:nth-child(5n + 3) .bookHeaderBackground {
  height: 25rem;
}

.article:nth-child(1) .bookHeaderBackground {
  height: 40rem;
}

.archive .font-bigger {
  font-size: 2rem !important;
}

.news-card-wide .bookHeaderBackground {
  height: 14rem;
  width: 14rem;
}

@media (max-width: 680px) {
  .staticMasonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .staticMasonry .masonry-stamp {
    grid-column: 2;
    grid-row: 1;
  }

  .masonry-stamp {
    display: block;
  }

  .archive {
    display: flex;
    flex-direction: column;
    grid-gap: 0rem;
  }

  .article {
    margin-bottom: 1em;
  }

  .article:nth-child(5n + 2) .bookHeaderBackground,
  .article:nth-child(5n + 3) .bookHeaderBackground {
    height: 15rem;
  }
}