.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "top top below below"
        "nav nav nav search";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
    background: #f3a222;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
    background: #f3a222;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
    align-items: baseline;
    padding-bottom: 0;
    box-shadow: 0px 5px 8px 0px rgb(243 162 34 / 75%);
}

/*Page Class*/

.mango .container-header
 {
    background-color: #7bb443;
}
.lemon .container-header
 {
    background-color: #fdda00;
}
.chilli .container-header
 {
    background-color: #dc3545;
}