/* ------------------------------------------------------------
   Thumb grid layout fix
   Ensures letter/article thumbnails show caption UNDER the image
   and are centered (mobile-first).
   Save as: /assets/css/thumb-grid-fix.css
------------------------------------------------------------ */

.thumb-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}

.thumb-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  gap:8px;
  padding:10px;
}

.thumb-card img{
  width:100%;
  max-width:220px;              /* keeps thumbs reasonable on desktop */
  height:auto;
  aspect-ratio:4 / 5;           /* consistent thumb crops */
  object-fit:cover;
  object-position:top center;   /* show the top (faces/headers) */
  border-radius:12px;
  display:block;
}

.thumb-title,
.thumb-sub{
  display:block;
}

.thumb-title{
  font-weight:700;
  line-height:1.2;
}

.thumb-sub{
  font-size:0.92rem;
  line-height:1.2;
  opacity:0.9;
}