# exemplo de uso
{% set kits = store.productKit() %}
{% if kits.items|length > 0 and kits.config.show_principal == '1' %}
<section id="kits" class="block{{ kits.config.formato == '1' ? ' mb-4' : '' }}">
	<h2 class="titulo mb-3">{{ kits.config.names }}</h2>
	
	<div class="block {{ kits.config.formato == '1' ? 'carousel owl-carousel owl-theme px-3' : 'row justify-content-center' }}">
		{% for kit in kits.items %}
		<div class="block text-center {{ kits.config.formato == '1' ? 'p-1' : 'col-md-3 col-sm-6 mb-4' }}">
			<div class="item block">
				<a href="{{ kit.url }}">
					<div class="foto">
						<img src="{{ kit.foto }}" alt="{{ kit.titulo }}" class="img-cover lazy" />
					</div>
					<div class="det">
						<h3 class="t">{{ kit.titulo }}</h3>
						{% if kit.frete_gratis %}
						<p class="mb-3"><span class="bg-success px-2 py-1 text-white">FRETE GRÁTIS</span></p>
						{% endif %}
						<span class="bt-comprar">CONFERIR O {{ kits.config.name|upper }}</span>
					</div>
				</a>
			</div>
		</div>
		{% endfor %}
	</div>
	
	{% if kits.config.formato == '1' %}
	<script>
		$(function(){
			$('#kits .carousel').owlCarousel({
				autoplay: false,
				loop: false,
				dots: true,
				nav: false,
				margin: 15,
				animateOut: 'bounceOutLeft',
				animateIn: 'bounceInRight',
				responsive: {
					0: {
						items: 1,
					},
					598: {
						items: 2,
					},
					800: {
						items: 3,
					},
					1024:{
						items: 4,
					}
				}
			});
		});
	</script>
	{% endif %}
</section>
{% endif %}