header {
    padding: 16px;
    border-bottom: 2px solid oklch(0.95 0.005 150);

    display: grid;
    grid-template-areas: "home . button" "panel panel panel";
    grid-template-columns: auto 1fr auto;
    align-items: center;

    .home {
        grid-area: home;

        display: flex;
        gap: 16px;
        align-items: center;

        .logo {
            width: 64px;
            height: 64px;
        }

        .name {
            font-size: calc(48px / 1.5);
            text-wrap: balance;

            @media (max-width: 640px) {
                font-size: calc(32px / 1.5);
            }
        }
    }

    .panel-button {
        grid-area: button;

        display: none;
        cursor: pointer;

        & svg {
            display: block;
        }

        &:hover {
            color: oklch(0.5 0.13 150);
        }
    }

    .panel {
        grid-area: panel;
        display: flex;
        gap: 24px;
        padding-top: 16px;
    }

    .groups {
        grid-area: groups;

        display: flex;
        gap: 16px;
    }

    .pages {
        grid-area: pages;

        display: flex;
        gap: 16px;

        @media not all and (max-width: 1024px) {
            border-left: 2px solid oklch(0.95 0.005 150);
            padding-left: 24px;
        }
    }

    .languages {
        grid-area: languages;

        display: flex;
        gap: 16px;

        @media not all and (max-width: 1024px) {
            border-left: 2px solid oklch(0.95 0.005 150);
            padding-left: 24px;
        }
    }

    & nav {
        display: contents;

        &:focus-within .panel {
            right: 0;
        }
    }

    @media (max-width: 1024px) {
        .panel-button {
            display: block;
        }

        .panel {
            position: fixed;
            top: 0;
            bottom: 0;
            right: -272px;
            width: 272px;
            background: oklch(1 0 150);
            border-left: 2px solid oklch(0.95 0.005 150);
            transition: right 0.2s;
            z-index: 3;
            padding: 32px;
            font-size: calc(32px / 1.5);
            overflow: auto;
            flex-direction: column;
            gap: 64px;
        }

        .groups, .pages, .languages {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .panel {
            right: calc(-100vw - 96px);
            width: calc(100vw - 96px);
        }
    }

    & a {
        color: inherit;

        &:hover {
            color: oklch(0.5 0.13 150);
        }
    }
}