1.main__heading {
2  font-weight: 600;
3  font-size: 2.25em;
4  margin-bottom: 0.75em;
5  text-align: center;
6  color: #eceff1;
7}
8
9.cards {
10  position: relative;
11}
12
13.card {
14  --flow-space: 0.5em;
15  --hsl: var(--hue), var(--saturation), var(--lightness);
16  flex: 1 1 14rem;
17  padding: 1.5em 2em;
18  display: grid;
19  grid-template-rows: auto auto auto 1fr;
20  align-items: start;
21  gap: 1.25em;
22  color: #eceff1;
23  background-color: #2b2b2b;
24  border: 1px solid #eceff133;
25  border-radius: 15px;
26}
27
28.card:nth-child(1) {
29  --hue: 165;
30  --saturation: 82.26%;
31  --lightness: 51.37%;
32}
33
34.card__bullets {
35  line-height: 1.4;
36}
37
38.card__heading {
39  font-size: 1.05em;
40  font-weight: 600;
41}
42
43.card__price {
44  font-size: 1.75em;
45  font-weight: 700;
46}
47
48.flow > * + * {
49  margin-top: var(--flow-space, 1.25em);
50}
51
52.cta {
53  display: block;
54  align-self: end;
55  margin: 1em 0 0.5em 0;
56  text-align: center;
57  text-decoration: none;
58  color: #fff;
59  background-color: transparent;
60  outline: 1px solid white;
61  padding: 0.7em;
62  border-radius: 10px;
63  font-size: 1rem;
64  font-weight: 600;
65}
66
67.card:hover {
68  --lightness: 80%;
69  background: #ffffff80;
70  color: #000;
71  outline: 1px solid rgb(255, 255, 255);
72  box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),
73    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
74    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
75  transition: all ease-in-out 0.3s;
76}
77
78.card:hover > .cta {
79  outline: none;
80  background-color: #0d0d0d;
81}
82