1.card {
2  width: 252px;
3  height: 265px;
4  background: white;
5  border-radius: 30px;
6  box-shadow: 15px 15px 30px #bebebe,
7             -15px -15px 30px #ffffff;
8  transition: 0.2s ease-in-out;
9}
10
11.img {
12  width: 100%;
13  height: 50%;
14  border-top-left-radius: 30px;
15  border-top-right-radius: 30px;
16  background: linear-gradient(#e66465, #9198e5);
17  display: flex;
18  align-items: top;
19  justify-content: right;
20}
21
22.save {
23  transition: 0.2s ease-in-out;
24  border-radius: 10px;
25  margin: 20px;
26  width: 30px;
27  height: 30px;
28  background-color: #ffffff;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.text {
35  margin: 20px;
36  display: flex;
37  flex-direction: column;
38  align-items: space-around;
39}
40
41.save .svg {
42  transition: 0.2s ease-in-out;
43  width: 15px;
44  height: 15px;
45}
46
47.icon-box {
48  margin-top: 15px;
49  width: 70%;
50  padding: 10px;
51  background-color: #e3fff9;
52  border-radius: 10px;
53  display: flex;
54  align-items: center;
55  justify-content: left;
56}
57
58.icon-box svg {
59  width: 17px;
60}
61
62.text .h3 {
63  font-family: 'Lucida Sans' sans-serif;
64  font-size: 15px;
65  font-weight: 600;
66  color: black;
67}
68
69.text .p {
70  font-family: 'Lucida Sans' sans-serif;
71  color: #999999;
72  font-size: 13px;
73}
74
75.icon-box .span {
76  margin-left: 10px;
77  font-family: 'Lucida Sans' sans-serif;
78  font-size: 13px;
79  font-weight: 500;
80  color: #9198e5;
81}
82
83.card:hover {
84  cursor: pointer;
85  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
86}
87
88.save:hover {
89  transform: scale(1.1) rotate(10deg);
90}
91
92.save:hover .svg {
93  fill: #ced8de;
94}