.block-kpi {
    --padding-v: var(--padding-xs);
    --padding-h: var(--padding-lg);
    --kpi-size: 15.625rem;
}
@media (max-width: 480px) {
    .block-kpi {
        --padding-v: 0;
        --padding-h: var(--padding-s);
        --kpi-size: 11.875rem;
    }
}

.block-kpi {
    padding: var(--padding-v) var(--padding-h);
    position: relative;
}
.block-kpi .kpi {
    z-index: 1;
    transform: translateZ(1px);
    align-items: center;
    display: flex;
    flex-direction: column;
    height: var(--kpi-size);
    position: relative;
    text-transform: uppercase;
}
.block-kpi .kpi .number {
    color: var(--white);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--black);
}
.block-kpi .kpi .text {
    color: var(--white);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media (hover: hover) {
    .block-kpi .kpi:first-child:hover .number {
        color: var(--orange);
        -webkit-text-stroke-color: var(--orange);
    }
    .block-kpi .kpi:nth-child(2):hover .number {
        color: var(--green);
        -webkit-text-stroke-color: var(--green);
    }
    .block-kpi .kpi:last-child:hover .number {
        color: var(--blue);
        -webkit-text-stroke-color: var(--blue);
    }
}
@media (max-width: 480px) {
    .block-kpi {
        padding-bottom: var(--padding-l);
    }
    .block-kpi .kpi:not(:last-child) {
        margin-bottom: var(--padding-l);
    }
    .block-kpi .kpi:first-child .number {
        color: var(--orange);
    }
    .block-kpi .kpi:nth-child(2) .number {
        color: var(--green);
    }
    .block-kpi .kpi:last-child .number {
        color: var(--blue);
    }
}
@media (min-width: 480px) {
    .block-kpi {
        background-color: var(--light-grey);
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        height: calc(var(--kpi-size) / 2 + var(--padding-xs));
        padding: var(--padding-v) var(--padding-h) 0;
    }
    .block-kpi__wrapper {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        transform: translate3d(0, -100%, 0);
    }
}