Mega Secondary List

{% set colHeadingId = colHeading | lower | replace(" ", "-") %}

{% set colClass = "lg:col-span-3" %}

{% set colLength = columns | length %}

{% if colLength == 2 %}
    {% set colClass = "lg:col-span-6" %}
{% elseif colLength == 3 %}
    {% set colClass = "lg:col-span-9" %}
{% elseif colLength == 4 %}
    {% set colClass = "lg:col-span-12" %}
{% endif %}

{% if viewAll.buttonColour %}
    {% set buttonModifier = viewAll.buttonColour %}
{% else %}
    {% set buttonModifier = 'light' %}
{% endif %}

<div class="{{colClass}}">
    <ul>
        <li>
            <h2 class="flex font-heading leading-tight lg:block text-button-2-arrow lg:mb-5 lg:pb-2">
                <span class="flex-1 py-4 px-4 lg:px-0 text-4xl lg:text-5xl lg:block text-body lg:text-bkg lg:bg-white">{{ colHeading }}</span>
            </h2>
            <div class="overflow-y-auto lg:overflow-visible h-full w-full">
                <div class="lg:flex space-x-8 text-body lg:text-grey">
                    {% for column in columns %}
                        <ul class="lg:flex-1">
                            {% for item in column.list %}
                                {% render "@menu-list-item", item %}
                            {% endfor %}
                        </ul>
                    {% endfor %}
                </div>
                {% if viewAll %}
                <div class="mt-8 px-4 lg:px-0">
                    <div class="hidden lg:block">
                    {% render "@button--" + buttonModifier, viewAll, true %}
                    </div>

                    <div class="lg:hidden pb-12">
                    {% render "@button--light", {
                        renderAsButton: viewAll.renderAsButton,
                        text: viewAll.text,
                        url: viewAll.url,
                        modifier: "bg-transparent text-button-2-surface border-2 border-button-2-surface inline-flex justify-center"
                    }, true %}
                    </div>
                </div>
                {% endif %}
            </div>
        </li>
    </ul>
</div>