1.card {
2  --main-color: #000;
3  --bg-color: #fff;
4  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
5  position: relative;
6  padding: 20px;
7  width: 320px;
8  background: var(--bg-color);
9  border-radius: 20px;
10  display: flex;
11  flex-direction: column;
12  gap: 15px;
13}
14
15.card__back svg, .card__menu svg {
16  width: 20px;
17  height: 20px;
18}
19
20.card__wrapper {
21  display: flex;
22  flex-direction: row;
23  justify-content: space-between;
24  align-items: center;
25}
26
27.card__img {
28  width: 170px;
29  height: 170px;
30  background: linear-gradient(90deg, #FFF8F7, #F0F7DF);
31  border-radius: 100%;
32  margin-inline: auto;
33}
34
35.card__img svg {
36  height: 150px;
37  transform: rotate(-45deg) translate(15px, 0px);
38}
39
40.card__title {
41  font-weight: 600;
42  font-size: 25px;
43  color: var(--main-color);
44}
45
46.card__subtitle {
47  font-weight: 400;
48  font-size: 15px;
49  color: var(--main-color);
50  letter-spacing: 0.5px;
51}
52
53.card__price {
54  font-weight: 600;
55  font-size: 22px;
56  color: var(--main-color);
57}
58
59.card__counter {
60  display: flex;
61  flex-direction: row;
62  align-items: center;
63  gap: 15px;
64  padding: 5px;
65  background: #F7F7F7;
66  border-radius: 50px;
67}
68
69.card__counter-score, .card__btn {
70  font-weight: 700;
71  font-size: 22px;
72  color: var(--main-color);
73}
74
75.card__btn {
76  width: 30px;
77  height: 30px;
78  border-radius: 100%;
79  border: none;
80  background: transparent;
81}
82
83.card__btn-plus {
84  background: var(--bg-color);
85}