{# ----------------------------
------------ ITEMS ------------
-------------------------------
    cards
    exibir_por_linha (6 | 4 | 3 | 1)
    visualizacao (grid|carrossel)
    layout (fill | no_fill | border)
    alinhamento
---------------------------- #}

{% set item = item %}

<div class="Secao-cards">
	{% if item.visualizacao == 'grid' %}
		<div class="Row _gutters-x _gutters-y">
			{% for card in item.cards %}
				<div class="col-{{ item.exibir_por_linha }}">
					{% include "componentes/card.twig" with {item: card, layout: item.layout} only %}
				</div>
			{% endfor %}
		</div>
	{% else %}
		<div class="Slider-cards swiper-cards swiper" data-items="{{12 / item.exibir_por_linha }}">
			<div class="swiper-navigation _flex _items-right">
				<button class="Button button-prev button-navigation" aria-label="Anterior">
					<i class="icon-left"></i>
				</button>
				<button class="Button button-next button-navigation" aria-label="Próximo">
					<i class="icon-right"></i>
				</button>
			</div>
			<div class="swiper-wrapper">
				{% for card in item.cards %}
					<div class="swiper-slide">
						<div>
							{% include "componentes/card.twig" with {item: card, layout: item.layout} only %}
						</div>
					</div>
				{% endfor %}
			</div>

			{% if item.cards > (12 / item.exibir_por_linha) %}
				<div class="swiper-pagination"></div>
			{% endif %}
		</div>
	{% endif %}
</div>