.card {
  border-radius: var(--radius-3);
  transition: all 0.2s var(--ease-2);
  padding: var(--size-3);
}

.card--raised {
  background: var(--surface-2);
  border: var(--border-size-1) solid var(--surface-4);
  box-shadow: var(--shadow-4);
}

.card--bordered {
  border: var(--border-size-1) solid var(--gray-7);
}

.card--bordered:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--gray-6);
}

.card--danger {
  border-color: var(--red-4);
  margin-top: var(--size-4);
}


/* BEM: card actions */
.card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-block-start: var(--size-4);
}

/* Clickable card wrapper */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card-link wa-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s var(--ease-2);
}

.card-link:hover wa-card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/* Investment projection cards with icons */
.card--iconed {
  display: grid;
  grid-template: min-content min-content / max-content 1fr;
  column-gap: var(--size-2);
  .values {
    grid-column: 2;
  }
  .card-content__prop {
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-3);
  }
  .card-content__value {
    font-size: var(--font-size-1);
    color: var(--text-2);
  }
  .icon {
    width: var(--size-5);
    height: var(--size-5);
    color: var(--blue-6);
    flex-shrink: 0;
  }
}