{% import "macros/images" as images %}
<section class="flex flex-col-reverse gap-12 py-16 lg:grid lg:grid-cols-[4fr_3fr] lg:gap-16 lg:py-20 xl:gap-24 xl:py-24">
	<article class="flex flex-col items-stretch justify-center">
		<h4 class="heading-3">
			{{block.heading}}
		</h4>
		<div class="mt-8 type-xl xl:mt-12 richtext">
			{{block.text}}
		</div>
	</article>
     {% if block.image %}
	<article class="relative">
    {{ images.imagerSrcset(
                block.image[0]|default,
                'heroBanner',
                {
                    classes: 'object-cover object-center w-full rounded-corners aspect-square childFull',
                }
            )
        }}
	</article>
    {% endif %}
</section>