{% set get_countSliders = sliders|length %}
{% if get_countSliders > 0 %}
	<section class="masterHeadComponent" data-ms-28431>
		{% if showBreadcrumb %}
			{% include 'components/_breadcrumb' with {
        breadcrumb: breadcrumb
      } %}
		{% endif %}
		<div style="--swiper-navigation-color: var(--a-blanco);" class="swiper masterHeadSlier" data-slider="{{ get_countSliders }}">
			<section class="swiper-wrapper">
				{% for slider in sliders %}
					<div class="swiper-slide">
						<section class="masterHeadSlier__bg">
							{% set img = slider.backgroundImage[0] ?? null %}
							{% if img %}
								{% include 'components/_imageTransformsSimple' with {
                  img: img,
                  setClass: 'masterHeadSlier__img',
                  alt: slider.itemTitle ?? img.title
                } only %}
							{% endif %}
						</section>
						<section class="container pt-5">
							{% if (slider.itemTitle|length) > 0 %}
								{% if loop.first %}
									<h1 class="title my-0 col-12 col-md-9 mx-auto">
										{{ slider.itemTitle }}
									</h1>
								{% else %}
									<p class="title my-0 col-12 col-md-9 mx-auto">
										{{ slider.itemTitle }}
									</p>
								{% endif %}
							{% endif %}
							{% if (slider.description|length) > 0 %}
								<div class="col-12 col-md-9 mx-auto description">
									{{ slider.description }}
								</div>
							{% endif %}

							{% if not slider.itemLink.isEmpty() %}
								<div class="d-inline-block mt-3">
									<a {{ slider.itemLink.getLinkAttributes() }} class="py-2 btnArrow btn_pink masterHeadSlier__btn btn">
										{% if slider.itemLink.customText != '' %}
											<span>{{ slider.itemLink.customText|upper }}</span>
										{% endif %}
										<img data-src="/assets/img/arrowhite.svg" src="" alt="btn" loading="lazy" class="lazyload img-fluid ms-3"/>
									</a>
								</div>
							{% endif %}
						</section>
					</div>
				{% endfor %}
			</section>
			<div class="swiper-button-next d-none {{
				        get_countSliders >= 4
				          ? 'd-lg-block'
				          : null
				        }}"></div>
			<div class="swiper-button-prev d-none {{
				        get_countSliders >= 4
				          ? 'd-lg-block'
				          : null
				        }}"></div>
			<div class="contentProgressBar d-none d-lg-block">
				<div class="swiper-progress-bar">
					<span class="slide_progress-bar"></span>
				</div>
			</div>
		</div>
		<div class="paginationSlider col-12">
			<section class="paginationSlider__content">
				<div class="col-12 col-lg-10 mx-auto">
					<section thumbsslider="" class="swiper masterHeadThumbs masterHeadThumbs_v2">
						<div class="swiper-wrapper">
							{% for slider in sliders %}
								<section class="swiper-slide">
									<span class="number me-lg-3 pt-1">
										{{ loop.index > 10 ? null : 0 }}{{ loop.index }}
									</span>
									<p class="title d-inline-block col-12 col-md-10">
										{{ slider.titleStep }}
									</p>
								</section>
							{% endfor %}
						</div>
					</section>
				</div>
			</section>
		</div>
	</section>
{% endif %}