<div {{ attributes.defaults({ class: 'mx-auto w-full max-w-[1280px]' }) }}>
    {% if this.hasBlocks %}
        {% set blocks = this.blocks %}
        {% set blockCount = blocks|length %}

        <section class="w-full">
            {% 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' }}"
                >
                    <div class="splide__track overflow-visible">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide !h-auto !w-[78vw] sm:!w-[62vw]">
                                    <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' }}"
                >
                    <div class="splide__track overflow-visible">
                        <div class="splide__list">
                            {% for block in blocks %}
                                <div class="splide__slide !h-auto md:!w-[48vw] lg:!w-[31%] xl:!w-[24%]">
                                    <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-6 {% if blockCount == 1 %}grid-cols-1 md:mx-auto md:max-w-xl{% elseif blockCount == 2 %}grid-cols-1 md:grid-cols-2{% else %}grid-cols-1 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>
