1.card {
2  width: 100%;
3  max-width: 290px;
4  height: 70px;
5  background: #353535;
6  border-radius: 20px;
7  display: flex;
8  align-items: center;
9  justify-content: left;
10  backdrop-filter: blur(10px);
11  transition: 0.5s ease-in-out;
12}
13
14.card:hover {
15  cursor: pointer;
16  transform: scale(1.05);
17}
18
19.img {
20  width: 50px;
21  height: 50px;
22  margin-left: 10px;
23  border-radius: 10px;
24  background: linear-gradient(#d7cfcf, #9198e5);
25}
26
27.card:hover > .img {
28  transition: 0.5s ease-in-out;
29  background: linear-gradient(#9198e5, #712020);
30}
31
32.textBox {
33  width: calc(100% - 90px);
34  margin-left: 10px;
35  color: white;
36  font-family: 'Poppins' sans-serif;
37}
38
39.textContent {
40  display: flex;
41  align-items: center;
42  justify-content: space-between;
43}
44
45.span {
46  font-size: 10px;
47}
48
49.h1 {
50  font-size: 16px;
51  font-weight: bold;
52}
53
54.p {
55  font-size: 12px;
56  font-weight: lighter;
57}
58
59