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

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

        {{ element.text.content | raw }}

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