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 bg-bkg lg:bg-white">
            <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-bkg p-4 flex items-center text-body" 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-button-2-surface transform rotate-180', ariaHidden: true } %}
                    </div>
                    <span class="hover:underline">
                        Back
                    </span>
                </button>
                <div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-6 xl:gap-12 bg-bkg lg:bg-white pb-10 md:pb-0">
                    {% for megaItem in megaList %}
                        {% render "@" + megaItem.component, megaItem.data %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>