1.card {
2  max-width: 350px;
3  background-color: rgb(7 16 45);
4  background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
5  background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
6  display: flex;
7  flex-direction: column;
8  padding: 20px;
9  border-radius: 20px;
10  border: 1px solid rgb(84 90 106);
11}
12
13.small-text, .title,.desc {
14  font-weight: 600;
15}
16
17.title,.desc {
18  margin: 8px 0;
19}
20
21.small-text {
22  color: #488aec;
23  font-size: 14px;
24}
25
26.title {
27  color: #fff;
28  font-size: 26px;
29  line-height: 26px;
30}
31
32.desc {
33  color: rgb(151 153 167);
34  font-size: 13px;
35}
36
37.buttons {
38  display: flex;
39  align-items: center;
40  justify-content: center;
41  gap: 10px;
42  margin-top: 10px;
43}
44
45.button {
46  display: flex;
47  align-items: center;
48  justify-content: space-between;
49  border-radius: 10px;
50  padding: 6px;
51  text-decoration: none;
52}
53
54.button:first-child {
55  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
56  background-color: #488aec;
57}
58
59.button:last-child {
60  box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17;
61  background-color: #fff;
62}
63
64.icon {
65  height: 25px;
66  width: 25px;
67}
68
69.icon svg {
70  width: 100%;
71  height: 100%;
72}
73
74.icon svg:last-child {
75  fill: #000
76}
77
78.button-text {
79  display: flex;
80  flex-direction: column;
81  margin-left: 8px;
82}
83
84.button-text span:first-child {
85  font-size: 12px;
86  font-weight: 600;
87}
88
89.google span:first-child {
90  color: rgb(219 206 253);
91}
92
93.apple span:first-child {
94  color: rgb(81 87 108);
95}
96
97.google span:last-child {
98  color: #fff;
99  font-weight: 800;
100}
101
102.apple span:last-child {
103  color: #000;
104  font-weight: 800;
105}