{% include 'quarks/_loadCssComponent' with { 
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{ id }}" data-bl-3312 class="{{ separation }} bannerLarge bg-{{ index.index0 }}">
	<div class="container">
		{% include 'components/_setHeadTitles' %}

		{% include 'components/_btnArrow' with {
      btn: component.itemLink,
      parentClass: 'col-12 col-md-5 mx-auto'
    } only %}
	</div>
	<div class="bannerLarge mt-4 mb-4 {{component.fieldSwitch is same as(false) ? 'container' }}">
		{% set backgroudImage = component.image[0] ?? null %}
		{% if backgroudImage %}
			{% include 'components/_imageTransformsSimple' with {
        img: backgroudImage,
        setClass: 'img-absolute',
        alt: component.blockTitle
      } only %}
		{% endif %}

		<section class="bannerLarge__content col-11 col-md-8 mx-auto py-4 text-{{
				      component.alignText
				      }}">
			{% if (component.description|length) > 0 %}
				<div class="bannerLarge__description mb-4">
					{{ component.description }}
				</div>
			{% endif %}
			{% if not component.fieldLinkCustomText.isEmpty() %}
			<a {{component.fieldLinkCustomText.getLinkAttributes()}} class="bannerLarge__cta py-3 px-lg-5 btnArrow">
				<span class="me-3">{{ component.fieldLinkCustomText.customText|t|upper }}</span>
				{{svg("@webroot/assets/img/arrow-simple.svg")}}
			</a>
			{% endif %}
		</section>
	</div>
</section>