.block-stats{
    --block-stats-bg: theme(colors.white);
    --block-stats-color: theme(colors.black);
    --block-stats-row-border: theme(colors.black);
    /* --block-stats-bg: #0066FF;
    --block-stats-color: #fff;
    --block-stats-row-border: #fff; */
    background: var(--block-stats-bg);
    color: var(--block-stats-color);
    &-row{
        border-top: 1px solid var(--block-stats-row-border);
        @apply grid gap-x-[calc(var(--grid-gutter)*2)] xl:grid-cols-4 pt-sm;
        &:not(:last-child){
            @apply pb-sm xl:pb-lg;
        }
        &__title{
            @apply block font-bold text-size-md mb-xxs xl:mb-0;
        }
    }
    &__items{
        grid-column: span 3;
        @apply xl:grid grid-cols-3 gap-x-[calc(var(--grid-gutter)*2)] gap-y-xs;
    }
    &-column{
        + .block-stats-column{
            border-top: 1px solid var(--block-stats-row-border);
            @screen xl{
                border-top:0;
            }
            @apply mt-sm xl:mt-0 pt-xs xl:pt-0;;
        }
        &:nth-child(n+4){
            border-top: 1px solid var(--block-stats-row-border);
            @apply pt-xs;
        }
    }
    &-item{
        &__number, &__content{
            color: var(--block-stats-color);
        }
        &__number{
            @apply block text-size-lg mb-0;
        }
        &__content{
            @apply block text-size-sm mb-0;
        }
        &:first-child{
            .block-stats-item{
                &__number{
                    @apply text-size-3xl;
                }
                &__content{
                    @apply text-size-md;
                }    
            }
        }
        &:not(:first-child){
            @apply pt-xs;
        }
        &:not(:last-child){
            border-bottom: 1px solid var(--block-stats-row-border);
            @apply pb-sm;
        }
    }
}