1.card {
2  --main-color: #fff;
3  --submain-color: #ccc;
4  --bg-color: #000;
5  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6  position: relative;
7  width: 300px;
8  height: 384px;
9  display: flex;
10  flex-direction: column;
11  align-items: center;
12  border-radius: 20px;
13  background: var(--bg-color);
14}
15
16.card__img {
17  height: 192px;
18  width: 100%;
19}
20
21.card__img svg {
22  height: 100%;
23  border-radius: 20px 20px 0 0;
24}
25
26.card__avatar {
27  position: absolute;
28  width: 114px;
29  height: 114px;
30  background: var(--bg-color);
31  border-radius: 100%;
32  display: flex;
33  justify-content: center;
34  align-items: center;
35  top: calc(50% - 57px);
36}
37
38.card__avatar svg {
39  width: 100px;
40  height: 100px;
41}
42
43.card__title {
44  margin-top: 60px;
45  font-weight: 500;
46  font-size: 18px;
47  color: var(--main-color);
48}
49
50.card__subtitle {
51  margin-top: 10px;
52  font-weight: 400;
53  font-size: 15px;
54  color: var(--submain-color);
55}
56
57.card__btn {
58  margin-top: 15px;
59  width: 76px;
60  height: 31px;
61  border: 2px solid var(--main-color);
62  border-radius: 4px;
63  font-weight: 700;
64  font-size: 11px;
65  color: var(--main-color);
66  background: var(--bg-color);
67  text-transform: uppercase;
68  transition: all 0.3s;
69}
70
71.card__btn-solid {
72  background: var(--main-color);
73  color: var(--bg-color);
74}
75
76.card__btn:hover {
77  background: var(--main-color);
78  color: var(--bg-color);
79}
80
81.card__btn-solid:hover {
82  background: var(--bg-color);
83  color: var(--main-color);
84}