public/products.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.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: var(--bg-alt);
	padding: 8px;
	border-radius: 8px;
}

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

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