//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .breadcrumbs {
        margin: 0 0 13px;
        min-height: 23px; // just to try to hold space open for less cls
        .item {
            text-transform: uppercase;
            font-weight: 700;
            // the separator between each breadcrumb
            &:not(:last-child)::after {
                margin: 0 10px;
            }
            // the current item
            &:last-child a {
                cursor: default;
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

// breadcrumbs are shown at this breakpoint
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .breadcrumbs {
        display: block;
    }
}