.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  justify-content: center;
  width: min(1200px, 100%);
  margin-inline: auto;
  gap: 16px;
}
.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.card img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.card-body { padding: 18px; }
.card h2, .card h3 { margin-bottom: 8px; font: 300 24px/1.1 var(--serif); }
.card p { color: var(--muted); }
.tag { display: inline-flex; margin-bottom: 14px; color: var(--sky); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; }
@media (max-width: 980px) {
  .card-grid { grid-template-columns: 1fr; width: 100%; }
}