@use '../utils' as *;

/*=========================
04. Breadcrumb
===========================*/
.breadcrumb {
    &__bg {
        background-size: cover;
        background-position: center;
        padding: 105px 0 105px;
        position: relative;
        z-index: 1;
        @media #{$xl} {
            padding: 90px 0 90px;
        }
        @media #{$md} {
            padding: 85px 0 90px;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #000 0%, #000 100%);
            z-index: -1;
            opacity: .2;
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            mix-blend-mode: luminosity;
            z-index: -1;
        }
    }
    &__content {
        & .title {
            margin-bottom: 15px;
            font-size: 48px;
            color: var(--tg-color-white-default);
            @media #{$xl} {
                font-size: 45px;
            }
            @media #{$md} {
                font-size: 42px;
            }
            @media #{$xs} {
                font-size: 38px;
            }
        }
        & .breadcrumb {
            margin-bottom: 0;
            gap: 10px;
            & span {
                font-size: 16px;
                color: var(--tg-theme-primary);
                font-weight: 600;
                text-transform: uppercase;
                line-height: 1;
                & a {
                    color: var(--tg-color-gray-8);
                    &:hover {
                        color: var(--tg-theme-primary);
                    }
                }
                & i {
                    color: var(--tg-color-gray-8);
                    font-weight: 700;
                    line-height: 0;
                }
            }
        }
    }
}