.card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
}

.card--compact {
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.card__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.card__title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

/* A heading within a card, for its parts (Models, Sandboxes, Tools). */
.card__section-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.card__subtitle {
    margin: 0;
    color: var(--color-on-surface-muted);
}

.card__footer {
    margin: 0;
    color: var(--color-on-surface-muted);
    font-size: var(--font-size-sm);
}