{% set width = element.width ?? 100 %}

{% embed '@DediSyliusCmsPlugin/Shop/UiElement/Grids/column-' ~ width ~ '.html.twig' %}
    {% block content %}
            <section class="block-section block-product-collection">
                {% if element.title is defined and (element.title is not empty or element.title.subtitle is not empty) %}
                    <div class="row">
                        {% include "@DediSyliusCmsPlugin/Shop/UiElement/Bases/title.html.twig" with {'element':element.title} %}
                    </div>
                {% endif %}

                <div class="cross-slider slick-arrow-btn">
                    {% for item in element.collection %}
                        <div class="item">
                            {% include "@DediSyliusCmsPlugin/Shop/UiElement/Bases/product.html.twig" with {'element':item} %}
                        </div>
                    {% endfor %}
                </div>
                <div class="cross-slider-dots"></div>

                {% if element.link is defined and element.link.link is not empty %}
                    <div class="row">
                        {% include "@DediSyliusCmsPlugin/Shop/UiElement/Bases/link.html.twig" with {'element':element.link} %}
                    </div>
                {% endif %}
            </section>
    {% endblock %}
{% endembed %}
