nav {
    display:grid;
    grid-template-columns: 1fr auto 2fr;
}


.div-menu-buttons {
    display:flex;
    gap:0.5em;
}


.button-menu-navy,.button-menu-white {
    font-family:'Open Sans';
    font-weight:100;
    border:none;
    text-decoration:none;
    padding:0.5em;
    border-radius: 0.5em 0.5em 0 0;
} 


.button-menu-navy {
    background-color:var(--navy);
    color:white;
}


.button-menu-white {
    background-color: white;
    color:black;
}


.button-menu-navy:hover,.button-menu-current:hover {
    background-color:var(--cyan);
    color:black;
}


@media only screen and (max-width: 775px) {
 
    nav {
        grid-template-columns:0 1fr 0;
        padding:0.75em;
    }

    .div-menu-buttons {
        display:grid;
        gap:0.75em;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }  

    .button-menu-navy,.button-menu-white {
        border-radius:0.25em;
        padding:0.25em;
        width:100%;
    }
}  


@media only screen and (max-width: 550px) {
 
    .div-menu-buttons {
        grid-template-columns: 1fr 1fr 1fr;
    } 
}

@media only screen and (max-width: 400px) {
 
    .div-menu-buttons {
        grid-template-columns: 1fr 1fr;
    } 
}