.wpb-header {
    
    &:has(.wpb-header__assets) { position: relative; z-index: 2; 
        .wpb-header__assets { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
    }

    &.has-search-form { padding: 2.4rem 0;
        .container { display: flex; flex-direction: column; row-gap: 1.8rem; }

        .wpb-header__search { --br: .6rem; --mh: 4.4rem; position: relative; border-radius: var(--br); display: flex; height: var(--mh); 
            input { z-index: 5; padding: 0 1.6rem; flex-grow: 1; font-size: 16px; height: var(--mh); border: none; background-color: var(--clr-light); border-right: 0; border-top-left-radius: var(--br); border-bottom-left-radius: var(--br); 
                &:focus { outline: none; }
            }
            button { z-index: 5; cursor: pointer; background-color: var(--clr-light); display: flex; column-gap: .7rem; color: var(--clr-headings); align-items: center; font-size: 1.4rem; font-weight: 600; height: var(--mh); padding: 0 1.6rem; border: none; border-left: .1rem solid var(--clr-border); border-top-right-radius: var(--br); border-bottom-right-radius: var(--br);
                i { font-size: 1.6rem; color: var(--clr-headings); }
            }
        }

        @media (min-width: 576px) {
            .wpb-header__search {width: 100%; max-width: 50rem;}
        }

        @media (min-width: 1200px) {
            .container { flex-direction: row; justify-content: space-between; align-items: center; }
        }
    }
}

/*** ---------- Header image ---------- ***/
.wpb-header.wpb-header--image { position: relative; 
    .wpb-header__body {
        .container { z-index: 2; }
    }
    .wpb-header__image {
        figure { padding-top: 3.25rem; 
            &::after { left: 50%; top: 0; transform: translateX(-50%); }
            img { border-radius: 1.6rem; max-height: 30rem; object-fit: cover; }
        }
    }

    @media (max-width: 768px) {
        &:has(.wpb-header__image) {padding-bottom: 0;}
        .wpb-header__image { 
            figure {
                img {border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
                &::after {left: unset; right: 0;}
            }
            .container-fluid {padding-right: 0;}
        }
    }

    @media (min-width: 992px) {
        .wpb-header__body {
            .wpb-text { width: 50%; }
        }
        .wpb-header__image {
            .container-fluid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
                figure { width: 50%; margin-left: auto; padding-top: 0; padding-left: 4.5rem; height: 100%;
                    img { height: 100%; max-height: 100%; }
                    &::after { top: 50%; left: 0; transform: translate(0, -50%); }
                }
            }
        }
    }   
}