{# The global navigation dropdown for each parent with children - used on desktop only #}
<div class="nav-dropdown bg-white-primary absolute z-10 w-screen top-28 inset-x-0 xl:left-container-fix opacity-0 pointer-events-none border-b border-solid border-mintyy-gray-iii group-hover/parent:opacity-100 group-hover/parent:pointer-events-auto peer-focus/dropdown:opacity-100 peer-focus/dropdown:pointer-events-auto peer-active/dropdown:opacity-100 peer-active/dropdown:pointer-events-auto focus-within:opacity-100 focus-within:pointer-events-auto">
    <div class="container-wrapper max-w-none mx-auto">
        <div class="padding-wrapper px-4 sm:px-6 lg:px-8 py-6 xl:py-8">
            <div class="content-wrapper w-full flex flex-col justify-start items-start">
                <div data-parent="{{ navItem.id }}" class="links-wrapper w-full flex flex-row justify-center items-center">
                    {% for child in navItem.children %}
                        <a href="{{ child.url }}" title="{{ child.title }}" class="dropdown-link w-auto ml-8 xl:ml-10 2xl:ml-16 first:ml-0 text-base xl:text-lg 2xl:text-xl text-black-primary font-body font-medium transition-colors duration-700 hover:text-brand-terracotta-aa active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2">
                            {{ child.title }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>