.card {
  background-color: var(--colour-bg-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.card h2,
.card h3 {
  margin-bottom: var(--space-sm);
}

.card p {
  color: var(--colour-text-main);
  margin-bottom: var(--space-md);
}

.card-link {
  font-weight: 600;
  font-size: 0.9375rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

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

@media (max-width: 768px) {
  .card-grid,
  .card-grid-three {
    grid-template-columns: 1fr;
  }
}