@media (max-width: 70em) {
    header {
        text-align: center;
    }
    header > .logo-wrapper,
    header > .slogan {
        display: block;
    }
    nav.main {
        float: none;
    }
}

@media (max-width: 40em) {
    header > nav > ul {
        grid-auto-flow: row;
    }
    header > nav > ul::before {
        content: "≡";
        display: inline-block;
        font-size: 2em;
    }
    header > nav > ul > li {
        max-height: 0;
        opacity: 0;
        transform: rotateX(-90deg);
        transform-origin: top center;
        transition: .3s max-height .1s, .3s opacity .1s, .3s transform .1s;
        visibility: hidden;
    }
    header > nav > ul:focus-within > li,
    header > nav > ul:hover > li {
        max-height: 3em;
        opacity: 1;
        transform: none;
        visibility: visible;
    }

    header > nav > ul > li > a {
        padding: .25em 1em;
    }
    header > nav > ul > li:not(:last-child) > a {
        border-bottom: 1px solid #ddd;
    }
}