{% block element_image %}
    {% set config = element.fieldConfig.elements %}
    {% set isCover = element.translated.config.displayMode.value == 'cover' %}

    <div class="cms-element-{{ element.type }}{% if config.verticalAlign.value and not isCover %} d-flex has-vertical-alignment{% endif %}{% if config.horizontalAlign.value == "center" and not isCover %} justify-content-center{% elseif config.horizontalAlign.value == "flex-end" and not isCover %} justify-content-end{% else %} justify-content-start{% endif %}">
        {% block element_product_slider_alignment %}
            {% if config.verticalAlign.value and not isCover %}
                <div class="cms-element-alignment{% if config.verticalAlign.value == "center" %} align-self-center{% elseif config.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
            {% endif %}
            {% block element_image_inner %}
                {% set imageElement %}
                    {% block element_image_container %}
                        {% if element.data.media.url %}
                            <div class="w-100 cms-image-container is-{{ element.translated.config.displayMode.value }}"
                                {% if element.translated.config.minHeight.value and isCover %} style="min-height: {{ element.translated.config.minHeight.value }};"{% endif %}>
                                {% block element_image_media %}
                                    {% set attributes = {
                                        'class': 'cms-image',
                                        'alt': element.translated.config.isDecorative.value ? '' : (element.data.media.translated.alt ?: ''),
                                        'title': element.translated.config.isDecorative.value ? '' : (element.data.media.translated.title ?: ''),
                                    } %}

                                    {% if isCover or element.translated.config.displayMode.value == 'contain' %}
                                        {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
                                    {% endif %}

                                    {% if element.translated.config.fetchPriorityHigh is defined and element.translated.config.fetchPriorityHigh.value %}
                                        {% set attributes = attributes|merge({ 'fetchpriority': 'high' }) %}
                                    {% else %}
                                        {% set attributes = attributes|merge({ 'loading': 'lazy' }) %}
                                    {% endif %}

                                    {% sw_thumbnails 'cms-image-thumbnails' with {
                                        media: element.data.media
                                    } %}
                                {% endblock %}
                            </div>
                        {% endif %}
                    {% endblock %}
                {% endset %}

                {% if element.translated.config.url.value %}
                    <a href="{{ element.translated.config.url.value }}"
                       class="cms-image-link"
                       {% if element.translated.config.ariaLabel.value %}aria-label="{{ element.translated.config.ariaLabel.value }}"{% endif %}
                       {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
                        {{ imageElement }}
                    </a>
                {% else %}
                    {{ imageElement }}
                {% endif %}
            {% endblock %}
            {% if config.verticalAlign.value and not isCover %}
                </div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}