1.card {
2  width: 17em;
3  height: 22.5em;
4  background: #171717;
5  transition: 1s ease-in-out;
6  clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
7  border-top-right-radius: 20px;
8  border-bottom-left-radius: 20px;
9  display: flex;
10  flex-direction: column;
11}
12
13.card span {
14  font-weight: bold;
15  color: white;
16  text-align: center;
17  display: block;
18  font-size: 1em;
19}
20
21.card .info {
22  font-weight: 400;
23  color: white;
24  display: block;
25  text-align: center;
26  font-size: 0.72em;
27  margin: 1em;
28}
29
30.card .img {
31  width: 4.8em;
32  height: 4.8em;
33  background: white;
34  border-radius: 15px;
35  margin: auto;
36}
37
38.card .share {
39  margin-top: 1em;
40  display: flex;
41  justify-content: center;
42  gap: 1em;
43}
44
45.card a {
46  color: white;
47  transition: .4s ease-in-out;
48}
49
50.card a:hover {
51  color: red;
52}
53
54.card button {
55  padding: 0.8em 1.7em;
56  display: block;
57  margin: auto;
58  border-radius: 25px;
59  border: none;
60  font-weight: bold;
61  background: #ffffff;
62  color: rgb(0, 0, 0);
63  transition: .4s ease-in-out;
64}
65
66.card button:hover {
67  background: red;
68  color: white;
69  cursor: pointer;
70}