/* The card styling itself is shared with the home-page blog section; only the
   page-level grid and pagination live here. */
.alt-blogpage { background: var(--alt-bl-bg); }

.alt-blogpage__grid {
  display: grid;
  grid-template-columns: repeat(var(--alt-bl-cols-d), minmax(0, 1fr));
  column-gap: var(--alt-bl-gap);
  row-gap: var(--alt-bl-gap-row, var(--alt-bl-gap));
}

.alt-blogpage .alt-article-card__media { aspect-ratio: var(--alt-bl-ratio); margin-bottom: 20px; }

/* The reference sets the card title at 20px and centres the whole block. */
.alt-blogpage .alt-article-card__title { font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.alt-blogpage .alt-article-card__excerpt { margin-bottom: 0; }

.alt-blogpage--center .alt-article-card__body { text-align: center; }
.alt-blogpage--center .alt-article-card__meta { justify-content: center; }
.alt-blogpage--center .alt-article-card__more { align-self: center; }

.alt-blogpage__empty { text-align: center; padding-block: 40px; }

@media (max-width: 1279px) {
  .alt-blogpage__grid { grid-template-columns: repeat(var(--alt-bl-cols-t), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .alt-blogpage__grid { grid-template-columns: repeat(var(--alt-bl-cols-m), minmax(0, 1fr)); }
  .alt-blogpage .alt-article-card__title { font-size: 18px; }
  /* The reference drops the excerpt on phones — the card is title-only there. */
  .alt-blogpage .alt-article-card__excerpt { display: none; }
}