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

{% block content %}

{% include 'pages/elements/_breadcrumb.html.twig' %}

    <div class="container-xl">
        <div class="row justify-content-center">
            <div class="col-12">
                <h1>{{ content.title }}</h1>
            </div>
        </div>
    </div>


{% if content.pages is defined and content.pages is not empty %}
    <div class="container-xl">
        <div class="row row-cols-1 row-cols-md-4 text-center">
            {% for item in content.pages %}
                <div data-aos="fade-in" class="col mb-4 px-4 px-md-1">
                    <a href="{{ sulu_content_path(item.url) }}">
                        <div class="card shadow-sm h-100">
                            <div class="card-img">
                                {% include 'pages/elements/_img.html.twig' with {'image': item.homePageImg, 'imageClass': 'card-img-top', 'optSize': ['small'] } %}
                            </div>

                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
        <div class="separateur mx-auto my-5"></div>
    </div>
{% endif %}

{% endblock %}