.block-animated-results {
    --animated-results-bg: var(--color-contrast-tint-90);
    --animated-results-on-bg: var(--color-contrast);
    --animated-results-kpi: var(--color-active);
    --animated-results-icon: var(--color-primary);

}

.block-animated-results > div {
    background: var(--animated-results-bg);
    color: var(--animated-results-on-bg);
}

.block-animated-results .results {
    --animated-results-gap: 26px;
    gap: var(--animated-results-gap);
}

.block-animated-results figure {
    --animated-results-columns: 1;
    flex-shrink: 0;
    flex-basis: calc(100% / var(--animated-results-columns) - var(--animated-results-gap) * (var(--animated-results-columns) - 1) / 2);
}

.block-animated-results .icon {
    color: var(--animated-results-icon);
    width: 120px;
    height: 120px;
}

.block-animated-results .icon svg {
    color: var(--animated-results-icon);
    width: 100%;
    height: 100%;
}

.block-animated-results .icon > svg path {
    fill: currentColor !important;
}

.block-animated-results .kpi {
    color: var(--animated-results-kpi);
}

.block-animated-results .number {
    font-size: 98px;
    line-height: 0.85;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

@media screen and (min-width: 48em) {
    .block-animated-results figure {
        --animated-results-columns: 2;
    }
}

@media screen and (min-width: 64em) {
    .block-animated-results figure {
        --animated-results-columns: 3;
    }
    
}

@media (prefers-color-scheme: dark) {
    .block-animated-results {
        --animated-results-bg: var(--color-contrast-tint-20);
        --animated-results-on-bg: var(--color-tint);
        --animated-results-kpi: var(--color-tint);
        --animated-results-icon: var(--color-secondary);
    }
}