.breadcrumbs{
    @apply grid-container mt-sm mb-base md:mt-12.5 md:mb-lg xl:mt-25 xl:mb-base;
    ul{
        @apply flex flex-wrap;
        li{
            @apply text-size-lg;
            &:not(:last-child){
                &::after{
                    content: '/';
                    @apply mx-[0.75vw];
                }
            }
            a, span{
                @apply text-grey-300;
            }
            &:last-child{
                span{
                    @apply text-black;
                }
            }
        }
    }
    &--spacing-2{
        @apply mb-lg;
    }
    @at-root body.has-primary-bg{
        .breadcrumbs{
            ul{
                li{
                    a, span{
                        @apply text-yellow-300;
                    }
                    &:last-child{
                        span{
                            @apply text-black;
                        }
                    }            
                }
            }
        }
    }
}