.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 4px;
    background-color: $blue-xl;
    color: #97a5c5;
    margin: 10px 0 20px;

    .fa-home {
        @include icon(getAssetUrl('media/icons/home.svg'));
        background-color: $blue;
        width: 15px;
        height: 15px;
        display: inline-block;
    }
    span {
        display: flex;
        align-items: center;
        position: relative;

        &::before {
            @include icon(getAssetUrl('media/icons/chevron-right.svg'));
            background-color: $grey-bg;
            margin-right: 15px;
            width: 12px;
            height: 12px;
            content: '';
            display: inline-block;
        }
    }

    @media (max-width: 768px), (min-width: 1001px) and (max-width: 1160px) {
        flex-direction: column;
        align-items: baseline;
        gap: 10px;

        span {
            @for $i from 1 through 10 {
                &:nth-of-type(#{$i}) {
                    margin-left: #{$i * 10}px;
                }
            }
            &::before {
                margin-right: 5px;
            }
        }
    }
}
