1.card {
2  --main-focus: #2d8cf0;
3  --font-color: #323232;
4  --font-color-sub: #666;
5  --bg-color: #fff;
6  --main-color: #323232;
7  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
8  width: 150px;
9  height: 200px;
10  background: var(--bg-color);
11  border: 2px solid var(--main-color);
12  box-shadow: 4px 4px var(--main-color);
13  border-radius: 5px;
14  padding: 10px;
15  display: flex;
16  flex-direction: column;
17}
18
19.card-content-wrapper {
20  transform: translateY(10px);
21  display: flex;
22  flex-direction: column;
23  gap: 5px;
24  transition: all 0.7s;
25}
26
27.card-title {
28  letter-spacing: 3px;
29  font-size: 20px;
30  font-weight: 700;
31  color: var(--font-color);
32}
33
34.card-price {
35  letter-spacing: 2px;
36  font-size: 20px;
37  color: var(--font-color);
38  font-weight: 700;
39}
40
41.card-price span {
42  font-size: 15px;
43  color: var(--font-color-sub);
44  font-weight: 500;
45}
46
47.card-subtitle {
48  letter-spacing: 2px;
49  font-size: 17px;
50  color: var(--main-focus);
51  font-weight: 500;
52}
53
54.card-benefits {
55  font-size: 15px;
56  padding-left: 20px;
57  color: var(--font-color);
58}
59
60.card-btn {
61  cursor: pointer;
62  width: 100px;
63  padding: 5px;
64  background: var(--main-focus);
65  border: none;
66  border-radius: 5px;
67  margin: 0 auto;
68  transform: translateY(30px);
69  color: var(--bg-color);
70  font-weight: 500;
71  font-size: 12px;
72  letter-spacing: 0.7px;
73  opacity: 0;
74  transition: all 0.7s;
75}
76
77.card:hover > .card-btn {
78  opacity: 1;
79  transform: translateY(17px);
80}
81
82.card-btn:hover {
83  font-weight: 700;
84  letter-spacing: 1px;
85}
86
87.card:hover > .card-content-wrapper {
88  transform: translateY(5px);
89}