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

{% embed '@DediSyliusCmsPlugin/Shop/UiElement/Grids/column-' ~ width ~ '.html.twig' %}
    {% block content %}
            <section class="block-section block-product-collection">
                <div class="title-wrapper">
                    {% if element.title is defined and element.title.title is not empty %}
                        <{{ element.title.htmlTag|default('h2') }} class="{{ element.title.class|default('h2') }}">{{ element.title.title }}</{{ element.title.htmlTag|default('h2') }}>
                    {% endif %}
                </div>

                <div class="subtitle-wrapper">
                    {% if element.title is defined and element.title.subtitle is not empty %}
                        <{{ element.title.subtitleHtmlTag|default('h3') }} class="{{ element.title.subtitleClass|default('h3') }}">{{ element.title.subtitle }}</{{ element.title.subtitleHtmlTag|default('h3') }}>
                    {% endif %}
                </div>

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