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
25
26
27
28
29
30
31
32

.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::before {
	content: "\20ac";
	margin-right: 0.3ex;
	font-size: 80%;
}
.product .price {
	font-size: 1.5rem;
}