<section class="block-section block-banner-row">
    <div class="row">
        <div class="col-md-6">
            <section class="block-banner {{ element.style1|default('dark') }}">
                <div class="img-wrapper">
                    <img src="{{ element.image1.image }}" alt="{{ element.image1.alt|default(element.title1.title) }}" title="{{ element.image1.title|default('') }}" class="img-fluid">
                </div>
                <div class="text-wrapper">
                    {% include '@SyliusShop/Icons/pattern.html.twig' %}
                    {% if element.title1 is defined and element.title1.title is not empty %}
                        <{{ element.title1.htmlTag|default('h2') }} class="title-wrapper display-1">{{ element.title1.title }}</{{ element.title1.htmlTag|default('h2') }}>
                    {% endif %}

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

                    {{ element.text1.content | raw }}

                    {% if element.link1 is defined and element.link1.link is not empty %}
                        <a href="{{ element.link1.link }}" class="btn btn-dark">{{ element.link1.label|default('app.ui_element.btn_default'|trans) }} ›</a>
                    {% endif %}
                </div>
            </section>
        </div>

        <div class="col-md-6">
            <section class="block-banner {{ element.style2|default('dark') }}">
                <div class="img-wrapper">
                    <img src="{{ element.image2.image }}" alt="{{ element.image2.alt|default(element.title2.title) }}" title="{{ element.image2.title|default('') }}" class="img-fluid">
                </div>
                <div class="text-wrapper">
                    {% include '@SyliusShop/Icons/pattern.html.twig' %}
                    {% if element.title2 is defined and element.title2.title is not empty %}
                        <{{ element.title2.htmlTag|default('h2') }} class="block-title display-1">{{ element.title2.title }}</{{ element.title2.htmlTag|default('h2') }}>
                    {% endif %}

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

                    {{ element.text2.content | raw }}

                    {% if element.link2 is defined and element.link2.link is not empty %}
                        <a href="{{ element.link2.link }}" class="btn btn-dark">{{ element.link2.label|default('app.ui_element.btn_default'|trans) }} ›</a>
                    {% endif %}
                </div>
            </section>
        </div>
    </div>
</section>
