
.stat {
    overflow: hidden;
}
.stat_item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 10px;
    padding: 22px 30px 30px;
    background: #F6F6F6;
    border-top: 8px solid var(--color-accent);
}
.stat_item > big {
    line-height: 1;
    font-size: 34px;
    font-weight: 600;
    font-family: var(--font-title);
}
.stat_item > b {
    line-height: 1;
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-title);
}
.stat_item > span {
    font-size: 20px;
}
.stat_item > .logos {
    /*display: flex;
    flex-wrap: wrap;
    gap: 20px;*/
    min-width: 260px;
    padding: 20px 0 0;
}
.stat_item > .logos img {
    display: inline-block;
    margin-right: 20px;
    max-width: 120px;
    max-height: 30px;
    mix-blend-mode: darken; /* убрать белый цвет. возможно работает только с .png */
}

@media (max-width: 1023px) {
    .stat .h1 {
        display: none;
    }
    .stat_row {
        display: grid;
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .stat .h1 {
        text-align: center;
    }
    .stat .h1 span {
        display: block;
        color: var(--color-accent2);
    }
    .stat_row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .stat_item {
        justify-content: flex-start;
        position: relative;
        grid-column: 2 / -1;
    }
    .stat_item[arise="out"] {
        transform: translateX(100%);
    }
    .stat_item[arise="in"] {
        transform: translateX(0);
    }
    /*.stat_item::after {
        content: '';
        display: block;
        position: absolute;
        top: -8px;
        left: 100%;
        bottom: 0;
        width: 100vw;
        background: #F6F6F6;
        border-top: 8px solid var(--color-accent);
    }*/
    .stat_item:not(:nth-child(1)) {
        margin-top: -8px;
    }
    .stat_item:nth-child(1) {
        grid-row: 1 / 2;
    }
    .stat_item:nth-child(2) {
        grid-row: 2 / 3;
        margin-left: 16%;
    }
    .stat_item:nth-child(3) {
        grid-row: 3 / 4;
        margin-left: 10%;
    }
    .stat_item:nth-child(4) {
        grid-row: 4 / 5;
    }
    .stat_item:nth-child(5) {
        grid-row: 5 / 6;
        margin-left: -11%;
    }
    .stat_item .countUp {
        display: inline-block;
        text-align: right;
    }
    .stat_item big {
        flex-shrink: 0;
    }
}

@media (min-width: 1200px) {
    .stat_item {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .stat_item > .logos {
        padding: 0 0 0 25px;
    }
}

@media (min-width: 1600px) {
    .stat_item > big {
        font-size: 37px;
    }
    .stat_item > span {
        font-size: 25px;
    }
}