.card {
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--spacing) * 6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-card);
  box-shadow: var(--shadow-xs);
  color: var(--color-card-foreground);
  gap: calc(var(--spacing) * 6);

  .card-header {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-rows: auto auto;
    align-items: start;
    padding-inline: calc(var(--spacing) * 6);
    gap: calc(var(--spacing) * 1.5);

    &:has(.card-action) {
      grid-template-columns: 1fr auto;
    }
  }

  .card-title {
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-none);
  }

  .card-description {
    color: var(--color-muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .card-action {
    grid-column-start: 2;
    grid-row: 1 / span 2;
    place-self: start end;
  }

  .card-content {
    padding-inline: calc(var(--spacing) * 6);
  }

  .card-footer {
    display: flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 6);
  }
}
