.blog-listing {
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-listing__empty {
  padding-block: var(--section-padding-block);
}

@media (width < 64rem) {
  .blog-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 48rem) {
  .blog-listing__grid { grid-template-columns: minmax(0, 1fr); }
}