<section class="visual-tabs">
	<div class="container-fluid">
		<div class="row justify-center">
			<div class="col-xl-10">
				<ul class="visual-tabs__list d-flex">
					{% if fields.tab %}
						{% for item in fields.tab %}
							<li class="visual-tabs__item js-tab-item">{{ item.tab_title }}</li>
						{% endfor %}
					{% endif %}
				</ul>
			</div>
		</div>

	{% if fields.tab %}
		{% for item in fields.tab %}
		<div class="row visual-tabs__block">

			{% if item.content_title is not empty or item.content_subtitle is not empty %}
				<div class="visual-tabs__content">
						{% if item.content_title is not empty %}
								<h3 class="visual-tabs__content-title">{{ item.content_title }}</h3>
						{% endif %}
						{% if item.content_subtitle is not empty %}
								<h5 class="visual-tabs__content-subtitle">{{ item.content_subtitle }}</h5>
						{% endif %}
				</div>
			{% endif %}

				{% set wrapper_classes = 'col-md-8 offset-md-4 col-xl-6 offset-xl-5 col-xxl-5 offset-xxl-5' %}
				{% if item.image_position == 'right' %}
					{% set wrapper_classes = 'col-md-7 col-xxl-4 col-xl-5 offset-xl-1 offset-xxl-2 visual-tabs__wrap-img--right' %}
				{% endif %}

				{% set box_classes = '' %}
				{% if item.image_size == 'boxed' %}
					{% set box_classes = 'visual-tabs__box' %}
				{% endif %}

				<div class="{{ box_classes }}">
					<div class="{{ wrapper_classes }}">
						<div class="visual-tabs__wrap-img">
							<img src="{{ item.image.url }}" alt="{{ item.image.alt }}">
						</div>
						<div class="visual-tabs__wrap">


							{% set counter_classes = 'visual-tabs__wrap-content visual-tabs__wrap-counter--none' %}
							{% if item.has_steps == 'true' %}
								{% set counter_classes = 'visual-tabs__wrap-content js-has-steps' %}
							{% endif %}

							<div class="{{ counter_classes }}">
								{% if item.content_text %}
									{% for wrap_item in item.content_text %}
									<div class="visual-tabs__wrap-item">

										{% if item.has_steps == 'true' %}
											<span class="visual-tabs__wrap-counter"><span></span></span>
										{% endif %}

										<h5 class="visual-tabs__wrap-title">{{ wrap_item.title }}</h5>
										<h6 class="visual-tabs__wrap-text">{{ wrap_item.text }}</h6>
									</div>
									{% endfor %}
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	{% endif %}
	</div>

</section>