.card {
  display: block;
  width: 100%;
  background: var(--color-surface-1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}

.card--interactive {
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.card--interactive:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
}