/* The list arrives after the page does, so the section collapses to nothing
   until the browser has filled it in — it must never leave a gap behind. */

.alt-recent {
  background: var(--alt-rv-bg);
}

.alt-recent:not(:has(.alt-recent__grid)) {
  padding-top: 0;
  padding-bottom: 0;
}
.alt-recent:not(:has(.alt-recent__grid)) .alt-recent__header { display: none; }

@supports not selector(:has(*)) {
  /* Without :has, keep the heading but let the empty list take no room. */
  .alt-recent__list:empty { display: none; }
}

.alt-recent__header { margin-bottom: 30px; }
.alt-recent__header--center { text-align: center; }
.alt-recent__header--left { text-align: left; }

.alt-recent__heading {
  margin: 0;
  color: var(--alt-heading-color);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-rv-heading-size);
  font-weight: var(--alt-fw-heading);
  line-height: 1.2;
}

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

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

@media (max-width: 767px) {
  .alt-recent__grid { grid-template-columns: repeat(var(--alt-rv-cols-m), minmax(0, 1fr)); column-gap: 16px; row-gap: 30px; }
  .alt-recent__header { margin-bottom: 20px; }
}