{% set isPublications = page.type == 'publications-list' %}
{% set isNews = page.type == 'news-list' %}
{% set bgColor = 'bg-orange' %}
{% set suptitle = 'Actualités' %}
{% set suptitleClass = 'hero__round--orange text-orange-dark' %}
{% set iconColor = 'icon--orange-hover' %}
{% set rowClass = 'mt-8 md:mt-10' %}
{% set paddingTitle = 'pt-13 md:pt-8' %}
{% if isPublications %}
{% set bgColor = 'bg-violet-dark' %}
{% set suptitle = 'Publications' %}
{% set suptitleClass = 'hero__round--violet text-orange' %}
{% set iconColor = 'icon--violet' %}
{% elseif page.type == 'index' %}
{% set bgColor = 'bg-green' %}
{% set suptitle = 'Nos fédérations' %}
{% set suptitleClass = 'hero__round--green text-violet' %}
{% set iconColor = 'icon--green-light' %}
{% set rowClass = 'mt-8 md:mt-1' %}
{% set paddingTitle = 'pt-13 md:pt-18' %}
{% endif %}
<div class="hero-list {{ bgColor}} {{ not isPublications and not isNews ? 'text-violet-dark hero-list--index' : 'text-white' }}">
<div class="fluid-grid lg:pt-13">
{% include 'front/partials/breadcrumb.html.twig' with {theme: isPublications ? 'white' : isNews ? 'orange-dark' : 'dark' } %}
<div class="row {{ rowClass }} relative z-1 pl-10 md:pl-0">
<div class="col-12 md-col-7 lg-col-6 md-col-offset-1 xl:relative">
<span class="hero__round hero__round--big {{ suptitleClass }} icon-center">
{{ suptitle }}
</span>
<h1 class="font-semibold title--XL {{ paddingTitle }}">{{ page.title }}</h1>
{% if page.description is defined and page.description is not null %}
<div class="paragraph wysiwyg paragraph--L mt-6 hero-list__chapo">
{{ page.description|raw }}
</div>
{% endif %}
</div>
<div class="col-12 md-col-3 xl-col-4 md-col-offset-9 lg-col-offset-8 order-first md:order-last">
{% if not isPublications and not isNews %}
<svg width="382" height="382" class="hero-list__icon {{ iconColor }}">
<use href="#icon-fede" xlink:href="#icon-fede"></use>
</svg>
{% else %}
<svg width="308" height="308" class="hero-list__icon {{ iconColor }}">
<use href="#icon-list-doc" xlink:href="#icon-list-doc"></use>
</svg>
{% endif %}
</div>
</div>
</div>
</div>