1.wallet {
2  --bg-color: #ceb2fc;
3  --bg-color-light: #f0e7ff;
4  --text-color-hover: #fff;
5  --box-shadow-color: rgba(206, 178, 252, 0.48);
6}
7
8.card {
9  width: 220px;
10  height: 321px;
11  background: #fff;
12  border-top-right-radius: 10px;
13  overflow: hidden;
14  display: flex;
15  flex-direction: column;
16  justify-content: center;
17  align-items: center;
18  position: relative;
19  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
20  transition: all 0.3s ease-out;
21  text-decoration: none;
22}
23
24.card:hover {
25  transform: translateY(-5px) scale(1.005) translateZ(0);
26  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
27    0 24px 46px var(--box-shadow-color);
28}
29
30.card:hover .overlay {
31  transform: scale(4) translateZ(0);
32}
33
34.card:hover .circle {
35  border-color: var(--bg-color-light);
36  background: var(--bg-color);
37}
38
39.card:hover .circle:after {
40  background: var(--bg-color-light);
41}
42
43.card:hover p {
44  color: var(--text-color-hover);
45}
46
47.card p {
48  font-size: 17px;
49  color: #4c5656;
50  margin-top: 30px;
51  z-index: 1000;
52  transition: color 0.3s ease-out;
53}
54
55.circle {
56  width: 131px;
57  height: 131px;
58  border-radius: 50%;
59  background: #fff;
60  border: 2px solid var(--bg-color);
61  display: flex;
62  justify-content: center;
63  align-items: center;
64  position: relative;
65  z-index: 1;
66  transition: all 0.3s ease-out;
67}
68
69.circle:after {
70  content: "";
71  width: 118px;
72  height: 118px;
73  display: block;
74  position: absolute;
75  background: var(--bg-color);
76  border-radius: 50%;
77  top: 7px;
78  left: 7px;
79  transition: opacity 0.3s ease-out;
80}
81
82.circle svg {
83  z-index: 10000;
84  transform: translateZ(0);
85}
86
87.overlay {
88  width: 118px;
89  position: absolute;
90  height: 118px;
91  border-radius: 50%;
92  background: var(--bg-color);
93  top: 70px;
94  left: 50px;
95  z-index: 0;
96  transition: transform 0.3s ease-out;
97}