.image-breadcrumb {
    position: relative;

    &::before {
        content: "";
        height: 100%;
        width: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
        position: absolute;
        top: 0;
        left: 0;
    }

    img {
        width: 100%;
        max-height: 360px;
        object-fit: cover;
        height: 100%;
    }

    .text-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        color: #fff;

        h1 {
            color: #fff;
            margin-bottom: 1rem;
        }
    }
}

.breadcrumb {
    margin-bottom: 0;
    background: rgba(0, 163, 232, 0.1);
    padding: .875rem 0;

    ul {
        list-style: none;
        margin-bottom: 0 !important;
        display: flex;

        li {
            position: relative;

            a,
            span {
                font-size: 1rem;
            }

            a {
                color: rgba(0, 0, 0, 0.28);

                &:hover {
                    color: $primary;
                }
            }

            span {
                color: $primary;
            }

            &:not(:first-child) {
                margin-left: 1rem;

                &::before {
                    content: "/";
                    position: absolute;
                    top: 0;
                    left: -12px;
                    color: rgba(0, 0, 0, 0.28);
                }
            }
        }
    }
}

.featured-img {
    img {
        height: 500px;
        width: 100%;
        object-fit: cover;
    }
}