{% include 'quarks/_loadCssComponent' with {
    name: '_' ~ component.type
  } only %}
<section {{ dataComponent }} id="{{id}}" class="tBanner {{component.fieldSwitch is same as(true) ? 'tBanner--blue'}} bg-{{ index.index0 }} {{ separation }}">
	{% set backgroundImage = component.image[0] ?? null %}
	{% if backgroundImage %}
		{% include 'components/_imageTransformsSimple' with {
      img: backgroundImage,
      setClass: 'tBanner__img',
      alt: component.blockTitle
    } only %}
	{% endif %}
	<div class="container pb-4 tBanner__body">
		<section class="col-lg-10 mx-auto {{component.alignText.value}}">
			{% include 'components/_setHeadTitles' with {
				stylesClass: 'tBanner__title'
			} %}

			{% if (component.description|length) > 0 %}
				<div class="tBanner__description pb-5">
					{{ component.description }}
				</div>
			{% endif %}
			{% if not component.itemLink.isEmpty() %}
			<a {{component.itemLink.getLinkAttributes()}} class="tBanner__cta py-3 px-lg-5 btnArrow">
				<span>{{ component.itemLink.customText|t|upper }}</span>
				{{svg("@webroot/assets/img/arrow-simple.svg")}}
			</a>
			{% endif %}
		</section>
	</div>
</section>