#page-wrapper {
    .node-manager-container:has(.full-width-column-row .image-container) {
        padding-top: 0;
    }

    .full-width-column-row:has(.image-container) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        .image-container {
            min-height: 300px;

            @media screen and (max-width: 600px) {
                min-height: 200px;
            }

            img {
                object-fit: cover;
            }
        }
    }

    &.page-title-above-image {
        .full-width-column-row:has(.image-container) {
            .draggable-level-1 {
                position: relative;

                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background-color: var(--hero-mask-color, #000);
                    opacity: var(--hero-mask-opacity, 0.4);
                    z-index: 1;
                }
            }

            .page-title-wrap {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--hero-title-color, #fff);
                font-size: var(--hero-title-font-size, 40px);

                @media screen and (max-width: 600px) {
                    font-size: calc(var(--hero-title-font-size) * 0.75);
                }
            }
        }
    }

    &:not(.page-title-above-image) {
        &.hero-has-box-shadow {
            .full-width-column-row:has(.image-container) {
                position: relative;

                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: linear-gradient(0deg, var(--box-shadow-color, #fff) 0%, rgba(255, 255, 255, 0) 16%);
                }
            }

            &.move-hero-image-above-breadcrumbs {
                .full-width-column-row:has(.image-container) {
                    position: relative;

                    &:after {
                        background: linear-gradient(0deg, var(--box-shadow-color, #f5f5f5) 0%, rgba(255, 255, 255, 0) 16%);
                    }
                }
            }
        }
    }

    &.use-home-icon {
        .breadcrumb {
            display: flex;
            justify-content: flex-start;

            ul {
                display: flex;
                align-items: center;
                width: 100%;

                li:first-child a[href="/"] {
                    display: block;
                    width: 32px;
                    height: 32px;
                    text-indent: -9999px;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 9.185l7 6.514v6.301h-14v-6.301l7-6.514zm0-2.732l-9 8.375v9.172h18v-9.172l-9-8.375zm2 14.547h-4v-6h4v6zm10-8.852l-1.361 1.465-10.639-9.883-10.639 9.868-1.361-1.465 12-11.133 12 11.148z'%3E%3C/path%3E%3C/svg%3E");
                    mask-size: 80%;
                    background-color: currentColor;
                    mask-repeat: no-repeat;
                    mask-position: center;
                }
            }
        }
    }

    &.use-arrow-separator {
        .breadcrumb {
            ul {
                li:not(:first-child) {
                    &:before {
                        content: ">";
                    }
                }
            }
        }
    }

    &.hero-has-border {
        .full-width-column-row:has(.image-container) {
            border-bottom: 5px solid var(--primary-color);
        }
    }

    &.contained-breadcrumbs.move-hero-image-above-breadcrumbs {
        .breadcrumb {
            margin-top: -20px;
            min-width: 85%;
            max-width: 85%;
            margin-left: auto;
            margin-right: auto;
            z-index: 2;
            position: relative;

            ul {
                padding-left: 20px;
            }

            @media screen and (max-width: 600px) {
                max-width: 100%;
            }
        }
    }
}