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: #27278d;
35}
36
37.item--2 {
38  background: #dd5709;
39}
40
41.item--3 {
42  background: #017227;
43}
44
45.item--4 {
46  background: #920866;
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}
75