1.card {
2  position: relative;
3  width: 190px;
4  height: 254px;
5  background-color: #000;
6  display: flex;
7  flex-direction: column;
8  justify-content: end;
9  padding: 12px;
10  gap: 12px;
11  border-radius: 8px;
12  cursor: pointer;
13  color: white;
14}
15
16.card::before {
17  content: '';
18  position: absolute;
19  inset: 0;
20  left: -5px;
21  margin: auto;
22  width: 200px;
23  height: 264px;
24  border-radius: 10px;
25  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
26  z-index: -10;
27  pointer-events: none;
28  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
29}
30
31.card::after {
32  content: "";
33  z-index: -1;
34  position: absolute;
35  inset: 0;
36  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
37  transform: translate3d(0, 0, 0) scale(0.95);
38  filter: blur(20px);
39}
40
41.heading {
42  font-size: 20px;
43  text-transform: capitalize;
44  font-weight: 700;
45}
46
47.card p:not(.heading) {
48  font-size: 14px;
49}
50
51.card p:last-child {
52  color: #e81cff;
53  font-weight: 600;
54}
55
56.card:hover::after {
57  filter: blur(30px);
58}
59
60.card:hover::before {
61  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
62}
63
64