<div class="image-text-section my-3 {{ backgroundColorClass ?? '' }}">
<div class="container py-5">
<div class="row">
<div class="col-12 col-lg-6 order-2 order-lg-{{ order.text ?? '1' }}">
<div>
{% if (title is defined) %}
<h2 class="mb-5 point {{ darkPoint|default(false) ? 'dark' : 'light' }}">{{ title }}</h2>
{% endif %}
<div class="mb-4 {{ title is not defined ? 'teaser-text' : '' }}">{{ text|raw }}</div>
</div>
<div class="mb-3 mb-lg-0 d-flex justify-content-center justify-content-sm-start">
<div class="text-center links">
{{ include('@components/button-with-icon.html.twig', {
text: button.text,
icon: 'fa-phone',
order: {
icon: '1',
text: '2'
},
link: {
href: 'tel:%s'|format(button.text)
}
}) }}
<p class="my-3">oder</p>
{{ include('@components/link.html.twig', {
text: link.text,
link: link.link
}) }}
</div>
</div>
</div>
<div class="col-12 col-lg-6 order-1 mb-4 mb-lg-0 order-lg-{{ order.image ?? '2' }}">
{% if (imageIsIcon is defined and imageIsIcon) %}
<img style="width: 14rem; height: 14rem;" class="d-block mx-auto" src="{{ image }}" alt="">
{% elseif (imageAsBackground is defined and imageAsBackground) %}
<div class="ratio ratio16x9 position-relative" style="height: 20rem">
<div class="image position-absolute w-100 h-100 top-0" style="background-image: url('{{image}}'); background-size: cover; background-position: center; background-repeat: no-repeat"></div>
</div>
{% else %}
<img class="d-block w-100" src="{{ image }}" alt="">
{% endif %}
</div>
</div>
</div>
</div>