{% set contact = this.contact %}

<div {{ attributes.defaults({ class: 'theme-menu-grid' }) }}>
    <article class="theme-menu-block">
        <a href="{{ path('home') }}" data-turbo-frame="_top" data-scroll-ignore title="{{ 'home.balise'|trans({}, 'meta') }}"></a>
        <p class="theme-vertical-center">
            <span>{{ 'home'|trans({}, 'menu') }}</span>
            {{ 'home.intro'|trans|raw }}
        </p>
    </article>

    <article class="theme-menu-img-bg">
        <a href="{{ path('cuvees') }}" data-turbo-frame="_top" title="{{ 'cuvee.balise'|trans({}, 'meta') }}"></a>
        <twig:Image
            mapping="public"
            alt="{{ 'menu.cuvees'|trans({}, 'img') }}"
            lazy="{{ false }}"
            picture:style="width: 100%; height: 100%;"
            path="{{ viti_theme_asset('images/menu/menu-champagne.jpg') }}"
            pathLandscape="{{ viti_theme_asset('images/menu/menu-champagne.jpg') }}"
            ratio="3/2"
            imageWidth="1685"
            imageHeight="1123"
        />
        <p>
            <span>{{ 'cuvees'|trans({}, 'menu') }}</span>
            {{ 'cuvee.intro'|trans }}
        </p>
    </article>

    <article class="theme-menu-block">
        <a href="{{ path('shop') }}" data-turbo-frame="_top" title="{{ 'shop.balise'|trans({}, 'meta') }}"></a>
        <p class="theme-vertical-center">
            <span>{{ 'shop'|trans({}, 'menu') }}</span>
            {{ 'shop.intro'|trans }}
        </p>
    </article>

    <article class="theme-menu-block theme-menu-block--contact">
        <a href="{{ path('contact') }}" data-turbo-frame="_top" data-scroll-ignore title="{{ 'contact.balise'|trans({}, 'meta') }}"></a>
        <p class="theme-vertical-center">
            <span>{{ 'contact'|trans({}, 'menu') }}</span>
            {{ 'contact.intro'|trans }}
        </p>
        {% include 'partials/_social_links.html.twig' with { contact: contact, tone: 'dark' } only %}
    </article>
</div>
