.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--bordered-large {
  padding: var(--size-4);
}

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

.card--danger .danger-zone h3 {
  color: var(--red-7);
  margin-top: 0;
}

.card--danger .danger-zone p {
  color: var(--red-6);
}

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

/* MOVE ME*/
.account-info {
  display: grid;
  row-gap: var(--size-2);
}