{% extends 'base.html.twig' %}

{% set OBJ_MOZAIQUE = 'mozaique' %}

{% block body %}
	{% if dev %}<!-- home -->{% endif %}
	<div class="carousel">
		{% for item in carousel %}
		<div class="carousel__item">
			<figure class="carousel__item-wrapper">
				<picture>
					<source media="(min-width: 1441px)" srcset="{{ src }}/{{ item.src }}-f.{{ img_extension }}" />
					<source media="(min-width: 961px)" srcset="{{ src }}/{{ item.src }}-b.{{ img_extension }}" />
					<source media="(min-width: 481px)" srcset="{{ src }}/{{ item.src }}-m.{{ img_extension }}" />
					<img class="carousel__content carousel__content--anim-img"
						{% if loop.index == 1 %}fetchpriority="high"
						{% else %}loading="lazy"{% endif %}
						src="{{ src }}/{{ item.src }}-t.{{ img_extension }}"
						alt="{{ item.alt }}"
						width="1080"
						height="720"
					>
				</picture>
			</figure>
		</div>
		{% endfor %}
		<div class="title">
			<h1 class="h1 text-gradient">
				{% if home_link %}<a href="{{ home_link }}">{% endif %}
					{{ h1|raw }}
				{% if home_link %}</a>{% endif %}
			</h1>
		</div>
	</div>
{% endblock %}