/*!
 * news-cards — one image size for every article on the hub.
 *
 * The card's image fills the card's height (h-full + object-fit: cover), so any difference in image
 * height is really a difference in CARD height — driven by how many lines the title and summary
 * take. Measured before this file existed: 254 / 301 / 678px tall images on the same page at 480px.
 *
 * Two layouts need two answers:
 *   - From 640px the image sits beside the text, so equal grid rows make every card the same height
 *     and therefore every image the same size, with no stranded whitespace (the button is pinned to
 *     the card bottom, so any slack falls between the summary and the button).
 *   - Below 640px the image sits above the text. Equal rows there would stretch every card to the
 *     tallest one, so the image gets a fixed crop instead: uniform, and the card stays compact.
 */
@media (min-width: 640px) {
  #tocs-news-grid {
    grid-auto-rows: 1fr;
  }

  /* The image keeps its OWN crop instead of filling the card. Tying it to the card height meant the
   * tallest article in a view set the size for everything in that view — so All (12 articles) and a
   * filtered view (fewer) rendered different image heights. Measured: 372px vs 298px at 1440px.
   * With an aspect ratio the height follows the column width only, so every view matches. */
  .tocs-news-card__media img,
  .tocs-news-card__media div {
    aspect-ratio: 2 / 3;
    height: auto;
  }
}

@media (max-width: 639.98px) {
  .tocs-news-card__media img,
  .tocs-news-card__media div {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}