.ht-blog-grid{
  display:grid;
  gap:24px;
}
.ht-blog-grid--cols-1{ grid-template-columns:1fr; }
.ht-blog-grid--cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ht-blog-grid--cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ht-blog-grid--cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width: 1024px){
  .ht-blog-grid--cols-3,.ht-blog-grid--cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ht-blog-grid--cols-2,.ht-blog-grid--cols-3,.ht-blog-grid--cols-4{ grid-template-columns:1fr; }
}

.blog-card__link{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  background:#fff;
  height:100%;
}
.blog-card__media{
  position: relative;
  background:#f2f2f2;
  overflow:hidden;
}

/* fallback 16:9 */
.blog-card__media::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 9/16 = 56.25% */
}

/* progressive enhancement */
@supports (aspect-ratio: 16 / 9){
  .blog-card__media::before{ display:none; }
  .blog-card__media{ aspect-ratio: 16 / 9; }
}

.blog-card__img,
.blog-card__placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.blog-card__img{ object-fit:cover; display:block; }

.blog-card__body{ padding:16px 16px 18px; }
.blog-card__meta{ font-size:13px; opacity:.75; display:flex; gap:8px; flex-wrap:wrap; }
.blog-card__sep{ opacity:.6; }

.blog-card__title{ margin:10px 0 8px; font-size:18px; line-height:1.25; }
.blog-card__excerpt{ margin:0 0 12px; opacity:.9; line-height:1.5; }
.blog-card__cta{ font-weight:600; }
.ht-blog-grid__pagination{ margin-top:24px; }