.grid {
  display: grid;
  gap: 16px;
}

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

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 134, 11, 0.28);
}

.card-media {
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.03);
}

.card-body {
  padding: 14px 14px 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.card-meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}