1/* before adding the img to the div with the 
2"card-img" class, remove css styles 
3.card-img .img::before and .card-img .img::after,
4then set the desired styles for .card-img. */
5.card {
6  --font-color: #323232;
7  --font-color-sub: #666;
8  --bg-color: #fff;
9  --main-color: #323232;
10  --main-focus: #2d8cf0;
11  width: 230px;
12  height: 300px;
13  background: var(--bg-color);
14  border: 2px solid var(--main-color);
15  box-shadow: 4px 4px var(--main-color);
16  border-radius: 5px;
17  display: flex;
18  flex-direction: column;
19  justify-content: flex-start;
20  padding: 20px;
21  gap: 10px;
22  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23}
24
25.card:last-child {
26  justify-content: flex-end;
27}
28
29.card-img {
30    /* clear and add new css */
31  transition: all 0.5s;
32  display: flex;
33  justify-content: center;
34}
35
36.card-img .img {
37 /* delete */
38  transform: scale(1);
39  position: relative;
40  box-sizing: border-box;
41  width: 100px;
42  height: 100px;
43  border-top-left-radius: 80px 50px;
44  border-top-right-radius: 80px 50px;
45  border: 2px solid black;
46  background-color: #228b22;
47  background-image: linear-gradient(to top,transparent 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 13px,transparent 13px);
48}
49
50.card-img .img::before {
51 /* delete */
52  content: '';
53  position: absolute;
54  width: 65px;
55  height: 110px;
56  margin-left: -32.5px;
57  left: 50%;
58  bottom: -4px;
59  background-repeat: no-repeat;
60  background-image: radial-gradient(ellipse at center,rgba(0,0,0,0.7) 30%,transparent 30%),linear-gradient(to top,transparent 17px,rgba(0,0,0,0.3) 17px,rgba(0,0,0,0.3) 20px,transparent 20px),linear-gradient(to right,black 2px,transparent 2px),linear-gradient(to left,black 2px,transparent 2px),linear-gradient(to top,black 2px,#228b22 2px);
61  background-size: 60% 10%,100% 100%,100% 65%,100% 65%,100% 50%;
62  background-position: center 3px,center bottom,center bottom,center bottom,center bottom;
63  border-radius: 0 0 4px 4px;
64  z-index: 2;
65}
66
67.card-img .img::after {
68 /* delete */
69  content: '';
70  position: absolute;
71  box-sizing: border-box;
72  width: 28px;
73  height: 28px;
74  margin-left: -14px;
75  left: 50%;
76  top: -13px;
77  background-repeat: no-repeat;
78  background-image: linear-gradient(80deg,#ffc0cb 45%,transparent 45%),linear-gradient(-175deg,#ffc0cb 45%,transparent 45%),linear-gradient(80deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),linear-gradient(-175deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),radial-gradient(circle at center,#ffa6b6 45%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(45deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(65deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(22deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 54%,rgba(0,0,0,0) 54%);
79  background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 75%,100% 95%,100% 60%;
80  background-position: center center;
81  border-top-left-radius: 120px;
82  border-top-right-radius: 10px;
83  border-bottom-left-radius: 10px;
84  border-bottom-right-radius: 70px;
85  border-top: 2px solid black;
86  border-left: 2px solid black;
87  transform: rotate(45deg);
88  z-index: 1;
89}
90
91.card-title {
92  font-size: 20px;
93  font-weight: 500;
94  text-align: center;
95  color: var(--font-color);
96}
97
98.card-subtitle {
99  font-size: 14px;
100  font-weight: 400;
101  color: var(--font-color-sub);
102}
103
104.card-divider {
105  width: 100%;
106  border: 1px solid var(--main-color);
107  border-radius: 50px;
108}
109
110.card-footer {
111  display: flex;
112  flex-direction: row;
113  justify-content: space-between;
114  align-items: center;
115}
116
117.card-price {
118  font-size: 20px;
119  font-weight: 500;
120  color: var(--font-color);
121}
122
123.card-price span {
124  font-size: 20px;
125  font-weight: 500;
126  color: var(--font-color-sub);
127}
128
129.card-btn {
130  height: 35px;
131  background: var(--bg-color);
132  border: 2px solid var(--main-color);
133  border-radius: 5px;
134  padding: 0 15px;
135  transition: all 0.3s;
136}
137
138.card-btn svg {
139  width: 100%;
140  height: 100%;
141  fill: var(--main-color);
142  transition: all 0.3s;
143}
144
145.card-img:hover {
146  transform: translateY(-3px);
147}
148
149.card-btn:hover {
150  border: 2px solid var(--main-focus);
151}
152
153.card-btn:hover svg {
154  fill: var(--main-focus);
155}
156
157.card-btn:active {
158  transform: translateY(3px);
159}
160