/* ===============================
   Shopee Landing
=============================== */

.slp-products{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:20px;
	margin:25px 0;
}

.slp-product{
	background:#fff;
	border:1px solid #ececec;
	border-radius:10px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	height:100%;
	box-shadow:0 2px 8px rgba(0,0,0,.05);
	transition:.25s;
}

.slp-product:hover{
	transform:translateY(-3px);
	box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* gambar */

.slp-product img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	display:block;
}

/* nama */

.slp-product h3{
	margin:12px;
	font-size:15px;
	line-height:1.5;
	font-weight:600;

	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;

	min-height:46px;
}

/* area tombol */

.slp-product p{
	margin:auto 12px 12px;
}

.slp-product a{
	display:block;
	text-align:center;
	background:#ee4d2d;
	color:#fff;
	text-decoration:none;
	padding:11px;
	border-radius:8px;
	font-weight:700;
	font-size:14px;
	transition:.2s;
}

.slp-product a:hover{
	background:#d93d20;
	color:#fff;
}

/* Tablet */

@media(max-width:991px){

	.slp-products{
		grid-template-columns:repeat(3,1fr);
	}

}

/* Mobile */

@media(max-width:768px){

	.slp-products{
		grid-template-columns:repeat(3,1fr);
		gap:10px;
	}

	.slp-product h3{
		font-size:13px;
		margin:8px;
		min-height:40px;
	}

	.slp-product p{
		margin:auto 8px 8px;
	}

	.slp-product a{
		font-size:12px;
		padding:9px;
		border-radius:6px;
	}

}