/home/moonrcjl/template.moontelict.com/arsha-prev/assets/scss/components/_breadcrumb.scss
@use '../utils' as *;

/*----------------------------------------*/
/*  2.11 Breadcrumb
/*----------------------------------------*/



.mt-breadcrumb {
    &-space {
        padding-top: 230px;
        padding-bottom: 120px;

        @media #{$md,$xs} {
            padding-top: 150px;
            padding-bottom: 80px;
        }
    }

    &-bg {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    &-title {
        font-size: 76px;
        color: var(--mt-common-white);

        @media #{$xl,$lg} {
            font-size: 80px;
        }

        @media #{$xs} {
            font-size: 50px;
        }
    }

    &-list {
        & span {
            margin: 0 2px;
            display: inline-block;
            color: var(--mt-common-white);
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;

            &.active {
                & a {
                    color: var(--mt-theme-1);
                }
            }

            &.dvir {
                margin: 0 2px;
            }
        }
    }

    &-thumb {
        margin-right: -80px;

        @media #{$md,$xs} {
            margin-right: 0;
        }
    }

}