{% block element_image %}
{% set config = element.fieldConfig.elements %}
<div class="cms-element-{{ element.type }}{% if config.verticalAlign.value %} has-vertical-alignment{% endif %} cms-image-element">
{% block element_product_slider_alignment %}
{% if config.verticalAlign.value %}
<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 style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;" class="cms-image-container is-{{ element.translated.config.displayMode.value }}"
{% if element.translated.config.minHeight.value and element.translated.config.displayMode.value == "cover" %} style="min-height: {{ element.translated.config.minHeight.value }};"{% endif %}>
{% block element_image_media %}
{% set attributes = {
'class': 'cms-image',
'alt': (element.data.media.translated.alt ?: ''),
'title': (element.data.media.translated.title ?: '')
} %}
{% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
{% endif %}
{% sw_thumbnails 'cms-image-thumbnails' with {
media: element.data.media
} %}
{% endblock %}
<div class="image-title almarenaRegular removeMobile" style="color: white; font-size:25px; z-index: 1 !important;">Energie. So einfach.</div>
</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.newTab.value %}target="_blank" rel="noopener"{% endif %}>
{{ imageElement }}
</a>
{% else %}
{{ imageElement }}
{% endif %}
{% endblock %}
{% if config.verticalAlign.value %}
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}