Modelo para mostrar os últimos Kits/Looks cadastrados na loja virtual. Geralmente utilizado na página inicial.

# HTML
{% 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 %}

// CSS
#kits{
	.item{
		background: #FFF;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
		border-radius: 3px;
		height: 100%;
		max-width: 260px;
		position: relative;
		overflow: hidden;
		display: block;
		margin: auto;
    	float: none;
		
		.foto{
			height: 370px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #EEE;
			
			img{
				max-height: 100%;
			}
		}
		
		&:hover{
			.det{
				bottom: 0;
			}
		}
		
		.det{
			width: 100%;
			padding: 10px;
			position: absolute;
			bottom: -250px;
			left: 0;
			background-color: rgba(0,0,0,0.5);
			
			transition: all .25s;
			
			.t{
				font-size: 18px;
				line-height: 22px;
				margin-bottom: 10px;
				color: #FFF;
			}
			
			.bt-comprar{
				display: inline-block;
				padding: 10px 15px;
				background-color: #53A412;
				color: #FFF;
				border-radius: 3px;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
	}
}