.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  width: min(20rem, 100%);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.card-body {
  padding: var(--space-4);
}

.card-title {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.card-text {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.card-actions {
  display: flex;
  gap: var(--space-2);
}

.card-flat {
  box-shadow: none;
}

.card-flat:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}