@media (max-width: 600px) {
	.hero{
		width: 100%;
		height: 100%;
	}

	.socials{
		gap: 3rem;
	}
}

@media (max-width: 768px) {
	.products {
		width: 100%;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		gap: 1rem;
	}

	.product {
		min-width: 50%;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.product:hover {
		transform: translateY(0);
	}
}