/*
 * BS.Web.Blog: the article overview (optional).      <link rel="stylesheet" href="/_content/BS.Web.Blog/bs-index.css">
 *
 * A grid with as many columns of cards as fit, and a wide centred column for it; a site may keep its own grid instead.
 *
 *   <main class="bs-index">                           centred, at most --bs-index-width wide (its padding is the page's)
 *     <ul class="bs-cards" data-bs-list>              one column on a phone, up to four at the default width
 *       <li>card</li> ...
 *     </ul>
 *     <a data-bs-more href="/guides?page=2">Load more</a>      BlogIndexPage.NextUrl; bs-infinite.js loads it ahead of the reader
 *   </main>
 *
 *   --bs-index-width   90rem    width of the column, padding included (five columns of 17rem take 91rem inside it)
 *   --bs-cards-min     17rem    narrowest card; on a narrower screen one card takes the whole width
 *   --bs-cards-gap     1.5rem   room between the cards (set this rather than a gap class: the rule here would win)
 *
 * The rules set the grid, the list's indent and markers and the column's width and centring, nothing else: the space above
 * and below and the column's padding stay the page's, so a site's utility classes for them keep working (these rules are in
 * no cascade layer, so they would beat a framework's layered utilities for the same properties).
 */

.bs-index {
  box-sizing: border-box;
  margin-inline: auto;
  width: 100%;
  max-width: var(--bs-index-width, 90rem);
}

.bs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--bs-cards-min, 17rem), 100%), 1fr));
  gap: var(--bs-cards-gap, 1.5rem);
  padding: 0;
  list-style: none;
}

/* A long word or a wide picture in a card never widens its column. */
.bs-cards > * {
  min-width: 0;
}