1.card {
2  width: 340px;
3  height: 150px;
4  background: whitesmoke;
5  transition: .2s linear;
6  box-shadow: 1px 1px 10px lightslategray;
7  cursor: default;
8}
9
10.card-top-part {
11  width: 100%;
12  height: 70%;
13  padding: 15px;
14  display: flex;
15}
16
17.left-part {
18  width: 70%;
19  display: flex;
20  flex-direction: column;
21  justify-content: space-around;
22}
23
24.right-part {
25  width: 30%;
26  height: 100%;
27  display: flex;
28  align-items: center;
29  justify-content: flex-end;
30}
31
32.user-name {
33  display: flex;
34  align-items: center;
35  justify-content: flex-start;
36  gap: 10px;
37}
38
39.name {
40  font-size: 24px;
41}
42
43.role {
44  font-size: 10px;
45  color: lightcyan;
46  font-weight: bold;
47  text-transform: lowercase;
48  background-color: lightskyblue;
49  padding: 4px 10px;
50  border-radius: 15px;
51}
52
53.position {
54  color: grey;
55}
56
57.card-bottom-part {
58  width: 100%;
59  height: 30%;
60  display: flex;
61  border: 1px solid rgb(231, 227, 227);
62  border-bottom-left-radius: inherit;
63  border-bottom-right-radius: inherit;
64}
65
66.user-photo {
67  width: 4.5rem;
68  overflow: hidden;
69  border-radius: 50%;
70  border: 1px solid rgb(231, 227, 227);
71  box-shadow: 2px 2px 10px lightslategray;
72  display: flex;
73  align-items: center;
74  justify-content: center;
75}
76
77img {
78  width: 100%;
79}
80
81.bottom-part {
82  width: 50%;
83  height: 100%;
84  display: flex;
85  flex-direction: row;
86  align-items: center;
87  justify-content: center;
88}
89
90.bottom-part:hover > .link {
91  transform: scale(1.1);
92}
93
94.link {
95  display: flex;
96  align-items: center;
97  justify-content: center;
98  font-size: 14px;
99  gap: 5.5px;
100  font-weight: bold;
101  transition: .2s linear;
102}
103
104.icon {
105  width: fit-content;
106  height: fit-content;
107  display: flex;
108  align-items: center;
109  justify-content: center;
110}
111
112.bottom-part:first-child {
113  border-right: 1px solid rgb(231, 227, 227);
114}