{% extends 'Default/base.html.twig' %}
{% set menu = 'home' %}
{% set home = true %}
{% set cookiesBox = false %}
{% block container %}
<div class='relative vfill {{desktop("gpadding")}} {{mobile("hz-25-in")}}'>
    <div class="absolute fill left top">
        {% set o = list[0] %}
        <img src='{{o.banner ? asset(o.banner) : ''}}' class='cover' />
        <div class="absolute fill top left bg-black transparent transition-3s"></div>
    </div>
    <div class="absolute fill left top">
        {% for o in list %}
        <figure class='shortcut-banner fill absolute top left transition-3s' id='{{o.slug}}' title="{{o.label}}">
            <img src='{{o.banner ? asset(o.banner) : ''}}' class='cover' />
            <div class="absolute fill top left bg-black transparent transition-3s"></div>
        </figure>
        {% endfor %}
    </div>
    <div class="relative h100 flex col center {{desktop(' hz-70-in hbottom-in')}} {{mobile('middle')}}">
        <figure class="{{desktop('quarter')}}{{mobile('half_40')}}">
            <img class="w100" src="{{asset(os_param('logowhite'))}}">
        </figure>
        <div class="relative flex {{desktop('row fill flex-1 hz-70-in')}} {{mobile('w100 col')}}">
            {% for o in list %}
            <div class="shortcut pointer relative flex col middle hoverflow {{desktop('')}} {{mobile('')}}" data-target="#{{o.slug}}">
                <a href="{{path('home-customer',{slug:o.slug})}}" class="fill absolute top left transition"></a>
                <div class="relative flex {{desktop('col middle center text-center vt-40-in hz-40-in ')}}{{mobile('row top vt-15-in hz-25-in')}}">
                    <icon class="relative icon transition  {{desktop('big')}}{{mobile('medium top-5')}}">
                        <img src="{{asset(o.icon)}}" class="contain">
                    </icon>
                    <div class="relative {{desktop('flex col center')}}{{mobile('left-20-in')}}">
                        <h2 class='h5 white upper {{desktop('vt-40')}} {{mobile('')}}'>{{o|os_trans('label')}}</h2>
                        <p class="white h6 light">
                        {{o|os_trans('description')|nl2br}}
                        </p>
                        <a href="{{path('home-customer',{slug:o.slug})}}" class="fill absolute top left"></a>
                        <div class="relative flex row white {{desktop('top-40')}} {{mobile('top-10')}}">
                            <a href="{{path('home-customer',{slug:o.slug,_locale:"fr"})}}">FR</a>
                            <i class="hz-20">|</i>
                            <a href="{{path('home-customer',{slug:o.slug,_locale:"en"})}}">EN</a>
                            {# <a class="h6 bg-success upper white {{desktop('radius-8 hz-20-in vt-15-in')}} {{mobile('radius-5 hz-10-in vt-5-in')}}" href="{{path('home-customer',{slug:o.slug})}}">En savoir plus</a> #}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock container %}