.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card-hover {
  cursor: pointer;
}

.card-hover:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  border-color: transparent;
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

.card-lg {
  padding: var(--sp-8);
  border-radius: var(--r-xl);
}

.card-sm {
  padding: var(--sp-4);
  border-radius: var(--r-md);
}