@layer components {

    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        border-top: 1px solid var(--c-line);
    }

    .stats__item {
        display: grid;
        align-content: start;
        gap: var(--s-2);
        padding: var(--s-6) var(--s-5) var(--s-6) 0;
        border-bottom: 1px solid var(--c-line);
    }

    .stats__value {
        font-size: var(--t-3xl);
        font-variant-numeric: lining-nums;
    }

    .stats__label {
        max-width: 26ch;
        font-weight: 500;
    }

    .stats__note {
        max-width: 32ch;
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .stats__note:empty {
        display: none;
    }

    .stats--prose {
        margin-block: var(--s-7);
    }

    .stats--prose .stats__value {
        font-size: var(--t-2xl);
    }

}