#site-header {
    &.has-large-image-page-banner {
        width: 100vw;
        max-width: none;
        padding: 0;
        position: relative;
        display: block;

        .menu {
            & > li:not(.button) {
                a {
                    &:after {
                        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7467%) hue-rotate(278deg) brightness(116%) contrast(100%);
                    }
                }
            }
        }

        #logos-and-menu-content {
            background-color: var(--wp--preset--color--white);

            #site-announcement + .logos-and-menu {
                position: relative;
                top: unset;
                left: unset;
                transform: unset;
            }
        }
        .logos-and-menu {
            position: absolute;
            justify-content: space-between;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1376px;
            margin-inline: auto;

            .logos {
                padding-left: 24px;
            }

            .menu {
                & > li:not(.button) {
                    a {
                        body:not(.mobile-menu-open) & {
                            color: var(--wp--preset--color--white);
                        }
                    }
                }

                .button {
                    a {
                        body:not(.mobile-menu-open) & {
                            color: var(--wp--preset--color--white);
                            border-color: var(--wp--preset--color--white);
                        }
                    }
                }
            }
        }
    }

    .large-image-page-banner {
        width: 100vw;
        position: relative;

        img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .title-wrapper {
            h1 {
                padding-left: 32px;
            }
        }

    }

    &.cutout {
        .large-image-page-banner {

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background: linear-gradient(0deg, rgba(1, 1, 1, 0.00) 8.26%, rgba(1, 1, 1, 0.85) 100%);
                height: 30%;
                width: 100%;
            }

            .title-wrapper {
                position: absolute;
                display: flex;
                font-size: var(--wp--preset--font-size--h-1-manrope);
                top: 50%;
                left: 35px;
                border: 46px solid var(--wp--preset--color--white);
                width: calc(100% - 162px);
                height: 50%;
                transform: translate(-10px, -50%);
                font-weight: 700;

                .left {
                    background-color: var(--wp--preset--color--white);
                    height: calc(100% + 2px);
                    top: -1px;
                    width: 35%;
                    position: relative;
                }

                h1 {
                    background-color: var(--wp--preset--color--white);
                    max-width: 470px;
                    margin: 0;
                    padding-right: 1rem;
                    padding-left: 0;

                    em {
                        font-family: var(--wp--preset--font-family--meno-display);
                        font-size: var(--wp--preset--font-size--h-1-meno-display);
                    }
                }
            }
            @media only screen and (max-width: 899px) {
                .title-wrapper {
                    top: unset;
                    bottom: 20px;
                    transform: unset;
                    width: 100%;
                    height: auto;
                    border: none;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .left {
                        width: 100%;
                        h1 {
                            max-width: 100%;
                            padding: 0 24px;
                        }
                    }
                }
            }
        }
        #logos-and-menu-content {
            background-color: var(--wp--preset--color--haverhill-blue);
        }
    }
}

body.has-large-image-page-banner #header-container > .wp-block-group {
    padding-left: 0;
    padding-right: 0;
}

.has-large-image-page-banner {
    #primary-menu-open {
        margin-right: 24px;
        filter: invert(100%);
    }
}