<div class="stacks-module list-3up stacks-contentgroup stacks-contentgroup-3up js-stacks-contentgroup grid">
    <h3 class="module-title">{{ context.display_title }}</h3>
    {% for content in context.content %}
    {% if forloop.first or forloop.counter0|divisibleby:'3' %}
    <div class="media-row">
    {% endif %}

        <div class="grid-3up grid-block {% if forloop.first or forloop.counter0|divisibleby:'3' %}first-in-row{% endif %} {% if forloop.counter|divisibleby:'3' %}last-in-row{% endif %}">
            <div class="image-container js-stacks-contentgroup-trigger">
                    <img class="lazy" data-original="{{ content.menu_image.3up_thumb }}" title="{{ content.title }}" alt="{{ content.title }}"/>
                    <!-- Optional Hover Over Image - START -->
                    {% if content.alternate_menu_image %}
                    <img class="lazy grid-item" data-original="{{ content.alternate_menu_image.3up_thumb }}" title="{{ content.title }}" alt="{{ content.title }}"/>
                    {% endif %}

                <!-- Optional Hover Over Image - END -->
                <h4 class="list-heading">{{ content.title }}</h4>
            </div>
            <div class="js-contentgroup-content-outer content-outer">
                <div class="js-contentgroup-content-inner content-inner">
                    <button class="close">Close</button>
                    {{ content.content.as_html }}
                </div>
            </div>

        </div>
    {% if forloop.last or forloop.counter|divisibleby:'3' %}
    </div>
    <div class="js-contentgroup-content-row grid-1up"></div>
    {% endif %}

{% endfor %}
    {% block share %}{% endblock %}
</div>
