@layer components {
    nav {
        @apply flex flex-wrap flex-row justify-between items-center py-5;
        @apply mx-auto max-w-3xl;
        @apply font-semibold;

        & > .nav-mobile {
            @apply md:hidden scale-125;
        }

        & > .nav-home {
            @apply uppercase font-semibold text-lg;
        }

        & > .nav-links {
            @apply hidden flex-row gap-5 md:h-auto md:flex;

            &.open {
                @apply max-md:flex max-md:flex-col max-md:w-full max-md:my-5 max-md:py-5 max-md:border-y-2;
            }
        }

        & a {
            @apply transition-colors duration-500;
            &:hover {
                @apply text-primary underline;
            }
        }
    }
}