1.card {
2 width: 190px;
3 height: 254px;
4 color: white;
5 display: grid;
6 grid-template-columns: 1fr 1fr;
7 grid-template-rows: 1fr 1fr;
8 gap: 5px;
9 overflow: visible;
10}
11
12.card .item {
13 border-radius: 10px;
14 width: 100%;
15 height: 100%;
16 display: flex;
17 flex-direction: column;
18 align-items: center;
19 justify-content: center;
20}
21
22.item:hover {
23 transform: scale(0.95);
24 transition: all 0.3s;
25}
26
27.item svg {
28 width: 40px;
29 height: 40px;
30 margin-bottom: 7px;
31}
32
33.item--1 {
34 background: #c7c7ff;
35}
36
37.item--2 {
38 background: #ffd8be;
39}
40
41.item--3 {
42 background: #a9ecbf;
43}
44
45.item--4 {
46 background: #f3bbe1;
47}
48
49.quantity {
50 font-size: 25px;
51 font-weight: 600;
52}
53
54.text {
55 font-size: 12px;
56 font-family: inherit;
57 font-weight: 600;
58}
59
60.text--1 {
61 color: rgba(149,149,255,1);
62}
63
64.text--2 {
65 color: rgba(252,161,71,1);
66}
67
68.text--3 {
69 color: rgba(66,193,110,1);
70}
71
72.text--4 {
73 color: rgba(220,91,183,1);
74}