<div {{ attributes }}>
    {% if this.hasBlocks %}
        <section class="mx-auto w-full max-w-7xl px-6 md:px-10 lg:mt-16 lg:px-20">
            <div class="hidden md:flex md:flex-wrap md:justify-center md:gap-4">
                {% for block in this.blocks %}
                    <div class="max-w-[15rem] flex-[0_1_15rem] lg:max-w-[16rem] lg:flex-[0_1_16rem]">
                        {% include '@components/shop/_information_block_card.html.twig' with { block: block } only %}
                    </div>
                {% endfor %}
            </div>

            <div class="md:hidden">
                <div class="grid grid-cols-2 gap-3">
                    {% for block in this.blocks %}
                        <div class="{% if this.blocks|length == 1 %}col-span-2{% endif %}">
                            {% include '@components/shop/_information_block_card.html.twig' with { block: block } only %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endif %}
</div>
