header {z-index: 200;}
header > * {width: 100%;}


/* 
MOBILE
*/
#header-mobile {
    top: .25rem;
    right: .25rem;
    left: .25rem;
    height: 1.9rem;
}

.header_m-button {
    margin-bottom: .25rem;
    z-index: 20;
}


/* 
DESKTOP
*/
@media only screen and (min-width: 1024px) {
    #header-desktop {
        top: .25rem;
        left: calc(100vw / 3);
        right: calc(100vw / 3);
        display: flex !important;
    }

    #header-desktop > button {text-align: center;}
    #header-desktop > button:not(:last-of-type) {margin-right: .25rem;}

    #header-desktop[data-status="open"] button {opacity: .5;}
    #header-desktop[data-status="open"] button.--active {opacity: 1;}
}
@media (hover: hover) {
    #header-desktop button {transition: opacity 500ms ease;}
    #header-desktop:hover button {opacity: .5;}
    #header-desktop button:hover {opacity: 1;}
}