<section class="block-section block-media-text {{ element.imageBeforeText ? 'left' : 'right' }}">
    <div class="row">
        <div class="col-md-6">
            <div class="img-wrapper">
                {{ dedi_sylius_image_optimizer_for_image(element.image.image, element.image.alt|default(element.title.title), {'class' : 'w-100'}) }}
            </div>
        </div>

        <div class="col-md-6">
            <div class="text-wrapper">
                {% if element.title is defined and element.title.title is not empty %}
                    <{{ element.title.htmlTag|default('h2') }} class="title-wrapper h2">{{ element.title.title }}</{{ element.title.htmlTag|default('h2') }}>
                {% endif %}

                {% if element.title is defined and element.title.subtitle is not empty %}
                    <{{ element.title.subtitleHtmlTag|default('h3') }} class="subtitle-wrapper h3">{{ element.title.subtitle }}</{{ element.title.subtitleHtmlTag|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-outline-primary">{{ element.link.label|default('app.ui_element.btn_default'|trans) }}</a>
                {% endif %}
            </div>
        </div>
    </div>
</section>
