.card {
  border-radius: var(--rad-card-lg);
  background: var(--color-surface-base-primary);
  border: 1px solid var(--color-border-base-middle);
  &.sm {
    border-radius: var(--rad-card-sm);
  }
  &.lg {
    border-radius: var(--rad-card-lg);
  }
  &.bg {
    background: var(--color-surface-base-secondary);
  }
  &.floating {
    border-color: var(--color-border-base-low);
    box-shadow: 0 8px 16px -8px rgba(75, 35, 43, 0.15);
  }
  &.rise {
    border: 1px solid var(--color-border-base-middle);
    box-shadow: 0 4px 8px rgba(75, 35, 43, 0.05);
  }
  &.offset {
    padding-inline: var(--spacing-6);
    padding-block: var(--spacing-4);
  }
}