/* Layout a griglia per l'header */
.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "top below" 
        "logo logo" 
        "nav nav";
}

/* below-top a destra */
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
    align-items: center;
}

/* topbar a sinistra */
.container-header .container-topbar {
    grid-area: top;
    padding: .5em;
}

/* Logo */
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}

/* Menu (nav) */
.container-header .container-nav {
    grid-area: nav;
}

/* Su schermi grandi: below-top e menu sulla stessa riga */
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }

    /* Se sono presenti below-top o topbar, mettile in riga sopra logo+menu */
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: 
            ". top top below below ." 
            ". logo nav nav nav .";
    }
}