/*
 * Overrides layered on top of the copied theme stylesheet (main.css).
 * Loaded after it in the frontend layout, so equal-specificity rules here win.
 */

/*
 * Article picture grid (home page): main image on the left spanning exactly
 * two rows, two square thumbs stacked on the right. The square thumbs alone
 * define the two row heights; the main image absolutely fills its two-row
 * area with object-fit: cover, so any uploaded aspect ratio stays perfectly
 * aligned with the stacked pair.
 *
 * 75% of the row (which carries Bootstrap's -15px margins) equals the old
 * col-md-9 main width; the 2rem gaps match the old page-hero2 padding-left
 * and page-hero3 margin-top, so the geometry is unchanged from the float
 * layout when the images happen to have the original aspect ratios.
 *
 * Below 768px the thumbs are hidden (.hidden-sm-down) and the row falls back
 * to normal flow: full-width main image at its natural aspect ratio.
 */
@media (min-width: 768px) {
  .article-pics {
    display: grid;
    grid-template-columns: 75% minmax(0, 1fr);
    gap: 2rem;
  }

  .article-pics .article-pics-main {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
  }

  /* Absolute so the main image never contributes to row sizing. */
  .article-pics .article-pics-main img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-pics .article-pics-thumb {
    grid-column: 2;
    min-width: 0;
  }

  .article-pics .article-pics-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}