.card {
  box-shadow: var(--shadow-cards);
  background-color: var(--ion-color-primary-contrast);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: left;
  display: block;
  height: 100%;
  transition: transform 250ms ease-in-out,
              box-shadow 250ms ease-in-out;
}

a.card,
.card.clickable {
  &:hover {
    transform: translate(-5px, -5px);
    box-shadow: var(--shadow-cards-hover);
  }
}