/* ========================== Post Archive ========================== */
.Archive-postList {
  display: flex;
  flex-direction: column;
  gap: var(--px-8);

  @media (min-width: 48rem) {
    gap: var(--px-24);
  }
}

.PostItem {
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  @media (min-width: 62rem) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.PostItem-image {
  display: block;
  overflow: hidden;
}

.PostItem-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

.PostItem-body {
  display: flex;
  flex-direction: column;
  gap: var(--px-16);
  padding: var(--px-32) var(--px-24) var(--px-40);

  @media (min-width: 48rem) {
    padding: var(--px-40) var(--px-48) var(--px-48);
  }

  @media (min-width: 75rem) {
    padding-right: var(--px-140);
  }
}

.PostItem-date {
  font-size: var(--px-16);
  font-family: var(--wp--preset--font-family--suisse-intl);
  opacity: 0.6;
}

.PostItem-title {
  font-size: var(--px-24);
  line-height: 110%;
  letter-spacing: -0.5px;
  margin-bottom: 0;

  @media (min-width: 48rem) {
    font-size: var(--px-28);
  }
}

.PostItem-title a {
  color: inherit;
  text-decoration: none;
}

.PostItem-excerpt {
  margin-top: auto;
}

.PostItem-readmore {
  margin-top: var(--px-24);
  align-self: flex-start;
}

.Archive-postList-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--px-64);
}

.Archive-postList-pagination .nav-links {
  display: flex;
  gap: var(--px-8);
  align-items: center;
}

.Archive-postList-pagination .page-numbers {
  padding: var(--px-8) var(--px-12);
  font-family: var(--wp--preset--font-family--suisse-intl);
}

.Archive-postList-pagination .page-numbers.current {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--beige);
}

.PostList-pagination a.page-numbers:hover {
  text-decoration: underline;
}