body > header {
    [popover] {
        inset: auto;
        inset-block-start: var(--header-height);
        inset-inline-start: anchor(start);
        position-try-fallbacks: flip-inline;
        background-color: var(--header-background);

        > menu, > nav {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.5rem;
        }
    }

    li:has(> [popover]) {
        anchor-scope: --trigger;

        > button { anchor-name: --trigger }

        > [popover] {
            position-anchor: --trigger;
            inset: auto;
            position-area: inline-end span-block-end;
            padding: 0;
        }
    }

    .authentication-menu li:has(> [popover]) > [popover] { position-area: inline-start span-block-end }

    @container page (min-width: 70em) {
        .navigation, .authentication { display: block }

        li:has(> [popover]) > [popover], .authentication-menu li:has(> [popover]) > [popover] {
            position-area: none;
            inset-block-start: max(var(--header-height), anchor(end));
            inset-inline-start: anchor(start);
        }

        nav > [popover] {
            display: contents;

            > menu {
                flex-direction: row;
                gap: 1.5rem;
            }
        }
    }
}