<div {{ attributes }}>
    {% if this.hasBlocks %}
        {% set blocks = this.blocks %}
        {% set blockCount = blocks|length %}
        <section class="mx-auto w-full max-w-7xl px-4 md:px-10 lg:mt-16 lg:px-20">
            {% if blockCount > 1 %}
                <div
                    class="splide md:hidden"
                    data-controller="carousel"
                    data-carousel-type-value="shop-info"
                    data-carousel-peek-value="{{ blockCount > 1 ? 'true' : 'false' }}"
                    role="group"
                    aria-label="Informations boutique">
                    <div class="splide__track overflow-visible">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide !h-auto !w-information-slide md:!w-information-slide-md lg:!w-auto">
                                    <div class="h-full">
                                        {% include '@components/shop/_information_block_card.html.twig' with { block: block } only %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if blockCount > 3 %}
                <div
                    class="hidden md:block splide"
                    data-controller="carousel"
                    data-carousel-type-value="shop-info"
                    data-carousel-peek-value="{{ blockCount > 1 ? 'true' : 'false' }}"
                    role="group"
                    aria-label="Informations boutique">
                    <div class="splide__track overflow-visible">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide !h-auto !w-information-slide md:!w-information-slide-md lg:!w-auto">
                                    <div class="h-full">
                                        {% include '@components/shop/_information_block_card.html.twig' with { block: block } only %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="{% if blockCount > 1 %}hidden md:grid{% else %}grid{% endif %} gap-3 md:gap-4 {% if blockCount == 1 %}grid-cols-1 md:mx-auto md:w-1/3 md:grid-cols-1{% elseif blockCount == 2 %}grid-cols-1 md:mx-auto md:w-2/3 md:grid-cols-2{% else %}grid-cols-1 md:w-full md:grid-cols-3{% endif %}">
                    {% for block in blocks %}
                        <div class="h-full">
                            {% include '@components/shop/_information_block_card.html.twig' with { block: block } only %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </section>
    {% endif %}
</div>
