1.cardContainer {
2  width: 200px;
3  height: 250px;
4  background-color: rgb(255, 255, 255);
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  position: relative;
9  transition-duration: .5s;
10  cursor: pointer;
11}
12
13.profileDiv {
14  z-index: 2;
15  width: 100%;
16  height: 100%;
17  display: flex;
18  flex-direction: column;
19  align-items: center;
20  justify-content: center;
21  background-color: rgb(24, 24, 24);
22  transition-duration: .5s;
23  color: rgb(155, 155, 155);
24  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
25  font-weight: 500;
26  font-size: 16px;
27}
28
29.cardContainer:hover .profileDiv {
30  transform: translateX(-25%) translateY(-20%);
31  transition-duration: .5s;
32}
33
34.infoDiv {
35  position: absolute;
36  width: 100%;
37  height: 100%;
38  display: flex;
39  align-items: center;
40  justify-content: center;
41  background-color: aliceblue;
42  z-index: 1;
43}
44
45.nameDiv {
46  width: 75%;
47  height: 100%;
48  display: flex;
49  flex-direction: column;
50  align-items: center;
51  justify-content: flex-end;
52  background-color: aliceblue;
53  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
54  gap: 2px;
55}
56
57.name {
58  margin: 0;
59  padding: 0;
60  font-size: 16px;
61  font-weight: 500;
62  color: black;
63}
64
65.role {
66  margin: 0;
67  padding: 0;
68  font-size: 13px;
69  font-weight: 400;
70  color: rgb(48, 48, 48);
71  margin-bottom: 5px;
72}
73
74.socialDiv {
75  width: 25%;
76  height: 100%;
77  display: flex;
78  flex-direction: column;
79  align-items: center;
80  justify-content: center;
81  color: rgb(14, 14, 14);
82  gap: 25px;
83}
84
85.infoDiv a {
86  width: 50%;
87}
88
89.socials {
90  width: 100%;
91  fill: rgb(14, 14, 14);
92}
93