/*
 * Layer row: Bootstrap .row from @sem('row') + flex without min-width broke the text column.
 * Grid: number | fluid text | fixed thumb (10rem).
 */
.page-blog-post-v29-layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (min-width: 768px) {
  .page-blog-post-v29-layer-row {
    grid-template-columns: auto minmax(0, 1fr) 10rem;
    gap: 1.5rem;
  }
}

.page-blog-post-v29-layer-row > * {
  min-width: 0;
}

.page-blog-post-v29-layer-row p {
  overflow-wrap: anywhere;
}

.page-blog-post-v29-layer-thumb img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

/* Hero: Tailwind h-64 md:h-96 — layout sizes only. */
.page-blog-post-v29-hero img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

@media (min-width: 768px) {
  .page-blog-post-v29-hero img {
    height: 24rem;
  }
}