Mega Dropdown

{% set dropDownId = heading | lower | replace(" ", "-") %}

<div id="second-level-menu-{{dropDownId}}" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 bg-grey-100 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:bg-transparent lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40  group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
    <div class="overflow-y-auto lg:overflow-visible h-full">
        <div class="h-full lg:h-auto z-20 lg:relative lg:bg-grey-100 lg:shadow-top-light">
            <div class="h-full lg:h-auto lg:container lg:py-12 lg:group-hover:animate-fadeQuick">
                <button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white p-4 flex items-center text-grey-800" aria-controls="second-level-menu-{{dropDownId}}" aria-expanded="false" aria-controls="second-level-menu-{{ dropDownId }}">
                    <div class="w-4 h-4 mr-4">
                        {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-bravo transform rotate-90', ariaHidden: true } %}
                    </div>
                    <span class="hover:underline">
                        Back
                    </span>
                </button>
                <div class="px-4 pb-3 font-semibold text-3xl border-b border-grey-400 lg:border-b bg-white text-grey-800 lg:hidden">
                    {{ heading }}
                </div>
                <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
                    {% for megaItem in megaList %}
                        {% render "@" + megaItem.component, megaItem.data %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>