#page .posts_list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-column-gap);
  padding-left: var(--page-padding-sides);
  padding-right: var(--page-padding-sides);
  --num-cols: 4;
}
@media (max-width: 1023px) {
  #page .posts_list {
    --num-cols: 3;
  }
}
@media (max-width: 720px) {
  #page .posts_list {
    --num-cols: 2;
  }
}

.posts_list_item {
  width: calc((100vw - (var(--page-padding-sides) * 2) - (var(--layout-column-gap) * (var(--num-cols) - 1))) / var(--num-cols));
  transition: opacity .25s;
}
@media (hover: hover) {
  .posts_list_item:hover {
    opacity: .7;
  }
}
.posts_list_cover {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
  object-position: center;
}
.posts_list .posts_list_title {
  margin-top: 1em;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-regular);
  font-weight: var(--font-weight-strong);
}
.posts_list_date {
  display: block;
  color: gray;
  text-align: right;
  font-weight: normal;
  margin-top: 1em;
}

.posts_list_pagination {
  display: flex;
  margin-top: var(--layouts-gap);
  padding-left: var(--page-padding-sides);
  padding-right: var(--page-padding-sides);
  color: grey;
  justify-content: space-between;
}