{% if sommaires|length > 0  %}
<!-- ======= Services Section ======= -->
{% for som in sommaires %}
    {% if som.isActif %}
<section id="services" class="services">
    <div class="container" data-aos="fade-up">
        <div class="section-title d-none">
            <h2 class="sectionTitre">{{ som.name }}</h2>
        </div>
        <div class="row gy-5">
            {% for sommaire in som.sommaires %}
            {% if sommaire.actif %}
            <div class="col-xl-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                <div class="service-item">
                    <div class="img">
                        <img src="{{ asset(sommaireImg ~ sommaire.imageName) }}" class="img-fluid" loading="lazy" alt="{{ sommaire.translations[app.request.locale].name|default('') }}">
                    </div>
                    <div class="details position-relative">
                        <div class="icon">
                            <i class="fa-solid fa-plane"></i>
                        </div>
                        {% if sommaire.redirect.url %}
                        <a href="{{ path(sommaire.redirect.url) }}" class="stretched-link">
                        {% else %}
                        <a href="{{ path('article', {'slug':sommaire.redirect.translations[app.request.locale].slug|default('article'), 'id':sommaire.redirect.id}) }}" class="stretched-link">
                        {% endif %}
                            <h3>{{ sommaire.translations[app.request.locale].name|default('') }}</h3>
                        </a>
                        <p>{{ sommaire.translations[app.request.locale].description|default('')|raw }}</p>
                    </div>
                </div>
            </div><!-- End Service Item -->
            {% endif %}
            {% endfor %}
        </div>
    </div>
</section><!-- End Services Section -->
    {% endif %}
{% endfor %}
{% endif %}