.navigation--xl {
    .navigation__list {
        @apply flex flex-col lg:grid grid-flow-col gap-8 text-xl;

        > .menu__item > .menu__link {
            @apply font-medium border-b border-zinc-200 pb-2;
        }
    }

    .menu__link {
        @apply hover:text-sky-500 focus-visible:text-sky-500 block;
    }

    button.menu__toggle {
        @apply hidden;
    }

    .navigation__sub-menu {
        @apply static block text-base divide-y divide-zinc-200 text-zinc-500;

        .menu__link {
            @apply py-2;
        }

        .navigation__sub-menu {
            @apply text-sm border-t border-zinc-200;

            .menu__link {
                @apply ps-3
            }
        }
    }
}