.block-subnav-columns{
    @apply 
        lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)] 
        mt-sm mb-base 
        md:mt-12.5 md:mb-lg 
        xl:mt-25 xl:mb-base
    ;
    &__nav{
        ul{
            @apply flex;
            li{
                a{
                    @apply text-size-lg text-grey-300;
                    span{
                        @apply inline-block ml-2.5 mr-1 text-size-sm align-top;
                    }
                }
                &.is-active{
                    a{
                        @apply text-black;
                    }
                }
                &:not(:last-child){
                    @apply mr-4;
                    &::after{
                        content: ',';
                        @apply text-black text-size-lg;
                    }
                }
            }
        }
    }
    &__description{
        p{
            @apply text-size-md;
        }
    }
    &--alt{
        .block-subnav-columns{
            &__nav{
                ul{
                    li:not(.is-active){
                        a{
                            @apply text-yellow-300;
                        }
                    }
                }
            }
            
        }
    }
}