.block-grid-list{
    container-type: inline-size;
    @apply mb-sm md:mb-base;
    &__inner{
        @apply grid lg:grid-cols-2 xl:grid-cols-4 gap-x-[calc(var(--grid-gutter)*2)] gap-y-xs md:gap-y-sm;
        > div{
            @apply border-t border-grey-200 pt-2;
            p{
                @apply text-size-base mb-0;
                &:first-child{
                    @apply text-grey-300;
                }
            }
        }
    }
    @at-root body.has-primary-bg {
        .block-grid-list{
            &__inner{
                > div{
                    @apply border-yellow-300;
                    p{
                        &:first-child{
                            @apply text-yellow-400;
                        }
                    }
                }
            }
        }
    }
}

@container (min-width: 35rem){
    .block-grid-list__inner{
        @apply md:grid-cols-2;
    }
}

@container (min-width: 56rem) {
    .block-grid-list__inner{
        @apply lg:grid-cols-3;
    }
}

@container (min-width: 62rem) {
    .block-grid-list__inner{
        @apply xl:grid-cols-4;
    }
}