.bmds-stats {
    position: relative;
    overflow: hidden;
    background: var(--bmds-gradient-stats);
    color: var(--kern-color-layout-text-default);
}
.bmds-stats--deep { background: var(--bmds-gradient-stats-deep); }

.bmds-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--kern-metric-space-default);
}

.bmds-stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--kern-metric-space-x-small);
    padding: var(--kern-metric-space-large);
    color: var(--kern-color-layout-text-default);
    border-radius: var(--kern-metric-border-radius-default);
    outline: var(--kern-metric-border-width-light) solid transparent;
    outline-offset: calc(-1 * var(--kern-metric-border-width-light));
}

.bmds-stats__value {
    font-size: var(--bmds-size-stat);
    font-weight: var(--kern-typography-font-weight-semi-bold);
    line-height: 1;
    letter-spacing: -0.03em;
}

.bmds-stats__label {
    font-size: var(--kern-font-size-16);
    line-height: 1.4;
    color: var(--bmds-color-ink-soft);
}

/* Gegenstueck zu `.bmds-section--accent .bmds-sectionhead__subline` in
   bmds.css. */
.bmds-stats .bmds-sectionhead__subline { color: inherit; opacity: 0.85; }

.bmds-stats__brandmark {
    --brandmark-width: 20rem;

    inset-inline-end: -4.375rem;
    inset-block-end: -3.625rem;
    color: var(--kern-color-decorative-brand-default);
    opacity: 0.11;
}
