.products {
	--grid-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: 8px;
	align-items: start;
}
@media (max-width: 600px) { .products { --grid-columns: 2; } }
@media (max-width: 400px) { .products { --grid-columns: 1; } }

.products .product {
	background-color: #0001;
	padding: 8px;
	border-radius: 8px;
}

.product img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product span { display: block; }
.product .price { font-size: 1.5rem; }