.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.card {
  background-color: var(--section-card-bg, white);
  color: var(--section-card-text, inherit);
  border: 1px solid var(--section-card-border, #e0e0e0);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  margin-bottom: var(--spacing-md);
}

.card h3 {
  margin-bottom: var(--spacing-sm);
}

.card-body {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.card-footer {
  display: flex;
  gap: var(--spacing-md);
  justify-content: space-between;
}

.card-tag {
  display: inline-block;
  background-color: var(--section-bg);
  color: var(--section-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: calc(var(--radius) / 2);
  font-size: var(--font-size-sm);
}