﻿.big-numbers {
    display: flex;
    flex-direction: column;
    /*gap: 24px;*/
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    --kpi-sd: 0.95;
    --kpi-ss: 1.32;
    --kpi-shs: 1;
    --kpi-optical: 12px;
}

    .big-numbers .kpi__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .big-numbers .kpi__icon-after-text {
        color: #010101;
        font-size: 120px;
        font-family: var(--font-tpSans-exLight);
    }

    .big-numbers .kpi-viewport {
        overflow: hidden;
        width: 100%;
        padding: 22px 0 92px;
    }

    .big-numbers .kpi-track {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        transition: transform 0.55s var(--ease);
        will-change: transform;
    }

        .big-numbers .kpi-track .kpi:first-child {
            margin-left: var(--gutter);
        }

    .big-numbers .kpi {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 40px;
        min-width: 960px;
    }

    .big-numbers .kpi__num {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        flex: none;
        isolation: isolate;
    }

    .big-numbers .kpi-ch {
        position: relative;
        flex: none;
        --s: var(--kpi-sd);
        width: calc(var(--gw) * var(--s) * 1px);
        height: calc(var(--gh) * var(--s) * 1px);
    }

    .big-numbers .kpi-full {
        position: absolute;
        display: block;
        height: auto;
        width: calc(var(--vbw) * var(--s) * 1px);
        left: calc(var(--gx) * var(--s) * -1px);
        top: calc(var(--gy) * var(--s) * -1px);
    }

    .big-numbers .kpi-shadow {
        z-index: 1;
        pointer-events: none;
        --ss: calc(var(--kpi-sd) * var(--kpi-shs));
        width: calc(var(--vbw) * var(--ss) * 1px);
        left: calc(var(--gx) * var(--ss) * -1px);
        top: calc(var(--gy) * var(--ss) * -1px);
        max-width: none;
        overflow: visible;
    }

    .big-numbers .kpi-glyph {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        z-index: 2;
        display: block;
    }

    .big-numbers .kpi-sym {
        z-index: 2;
    }

    .big-numbers .kpi-ch--sym {
        --s: var(--kpi-ss);
        align-self: center;
        transform: translateY(calc(var(--kpi-optical) * -1));
    }

    .big-numbers .kpi-ch--0 {
        --gx: 82;
        --gy: 38;
        --gw: 188.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--1 {
        --gx: 82;
        --gy: 38;
        --gw: 160.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--2 {
        --gx: 82;
        --gy: 38;
        --gw: 163.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--3 {
        --gx: 82;
        --gy: 38;
        --gw: 170.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--4 {
        --gx: 82;
        --gy: 38;
        --gw: 155.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--5 {
        --gx: 79;
        --gy: 38;
        --gw: 166.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--6 {
        --gx: 82;
        --gy: 38;
        --gw: 173.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--7 {
        --gx: 82;
        --gy: 38;
        --gw: 167.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--8 {
        --gx: 86;
        --gy: 38;
        --gw: 171.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--9 {
        --gx: 82;
        --gy: 38;
        --gw: 174.1;
        --gh: 284;
        --vbw: 535;
    }

    .big-numbers .kpi-ch--near {
        --gx: 3.2;
        --gy: 3.2;
        --gw: 60;
        --gh: 16;
        --vbw: 69;
    }

    .big-numbers .kpi-ch--percent {
        --gx: 3.2;
        --gy: 3.2;
        --gw: 45;
        --gh: 40;
        --vbw: 54;
    }

    .big-numbers .kpi-ch--plus {
        --gx: 3.2;
        --gy: 3.2;
        --gw: 39;
        --gh: 40;
        --vbw: 48;
    }

    .big-numbers .kpi__desc {
        flex: none;
        max-width: 350px;
        font-weight: var(--fw-extralight);
        font-family: var(--font-tpSans-exLight);
        color: var(--title-default);
        transform: translateY(calc(var(--kpi-optical) * -1));
    }

    .big-numbers .big-numbers__action {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        height: 56px;
    }

        .big-numbers .big-numbers__action.is-hidden {
            display: none;
        }

    .big-numbers .big-numbers__progress {
        position: relative;
        width: 581px;
        max-width: 46%;
        height: 1px;
        background: var(--bg-neutral-strong);
    }

    .big-numbers .big-numbers__progress-fill {
        position: absolute;
        left: 0;
        top: -1.5px;
        height: 4px;
        width: 40%;
        background: var(--bg-primary-strong);
        transition: width 0.45s var(--ease);
    }

@media (max-width: 1024px) {
    .big-numbers .kpi {
        flex: 0 0 88%;
        max-width: 88%;
        min-width: 0;
    }

    .big-numbers .kpi__desc {
        max-width: 270px;
    }

    .big-numbers .kpi__icon-after-text {
        font-size: 64PX;
    }
}

@media (max-width: 767px) {

    .big-numbers .kpi__num {
        margin-right: auto;
    }

    .big-numbers .kpi {
        flex: none;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: 8px;
    }

    .big-numbers .kpi-track {
        gap: 100px;
    }

    .big-numbers .kpi__icon-after-text {
        font-size: 36px;
    }

    .big-numbers {
        --kpi-sd: 0.4;
        --kpi-ss: 0.7;
        --kpi-optical: 6px;
    }

        .big-numbers .kpi__content {
            /*text-align: center;*/
        }

        .big-numbers .big-numbers__progress {
            max-width: 40%;
        }

        .big-numbers .kpi-viewport {
            padding: 22px 0;
        }

    /*.big-numbers .kpi-track .kpi:first-child {
            margin-left: 0;
        }*/
}
