.statisticsCounter {
    @include flex-direction(column);
    width: 100%;
    gap: 0.8rem;
    padding: var(--stats-item-outer-padding, 0 1.6rem 4.8rem);
    max-width: var(--stats-max-width, var(--main-container-max));
    margin: 0 auto;

    @include min(tablet) {
        display: grid;
        grid-template-columns: 1.25fr 3fr 2fr 2fr 2fr;
    }
}

.gridItem {
    background-color: var(--stats-item-bg-color, #e7e7e7);
    padding: var(--stats-item-padding, 1.6rem);
    border-radius: var(--stats-item-border-radius, 1.6rem);
    border: var(--stats-item-border, none);
    @include flex-direction(column);
    @include flex-align(flex-start, space-between);
    gap: 1.6rem;

    p {
        margin: 0;
        @include flex-direction(row);
        @include flex-align(center, space-between);
        gap: 0.4rem;

        &:first-of-type {
            color: var(--stats-item-title-font-color, #6f817a);
            font-size: var(--stats-item-title-font-size, 1.6rem);
            font-weight: var(--stats-item-title-font-weight, 700);
            line-height: var(--stats-item-title-line-height, 2.4rem);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            align-self: stretch;
        }

        &:nth-of-type(2) {
            justify-content: center;
            gap: 1rem;
            color: var(--stats-item-value-font-color, #2c145c);
            font-size: var(--stats-item-value-font-size, 2.8rem);
            font-weight: var(--stats-item-value-font-weight, 800);
            line-height: var(--stats-item-value-line-height, 3.2rem);
        }

        span {
            color: var(--stats-item-value-label-font-color, #2c145c);
            font-size: var(--stats-item-value-label-font-size, 1.4rem);
            font-weight: var(--stats-item-value-label-font-weight, 400);
            line-height: var(--stats-item-value-label-line-height, 1.6rem);
            align-self: flex-end;
        }
    }
}