1.card {
2  width: 320px;
3  background: #fff480;
4  color: black;
5  position: relative;
6  border-radius: 2.5em;
7  padding: 2em;
8  transition: transform 0.4s ease;
9}
10
11.card .card-content {
12  display: flex;
13  flex-direction: column;
14  justify-content: space-between;
15  gap: 5em;
16  height: 100%;
17  transition: transform 0.4s ease;
18}
19
20.card .card-top, .card .card-bottom {
21  display: flex;
22  justify-content: space-between;
23}
24
25.card .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title {
26  margin: 0;
27}
28
29.card .card-title {
30  font-weight: bold;
31}
32
33.card .card-top p, .card .card-bottom p {
34  font-weight: 600;
35}
36
37.card .card-bottom {
38  align-items: flex-end;
39}
40
41.card .card-image {
42  position: absolute;
43  width: 100%;
44  height: 100%;
45  top: 0;
46  left: 0;
47  display: grid;
48  place-items: center;
49  pointer-events: none;
50}
51
52.card .card-image svg {
53  width: 4em;
54  height: 4em;
55  transition: transform 0.4s ease;
56}
57
58.card:hover {
59  cursor: pointer;
60  transform: scale(0.97);
61}
62
63.card:hover .card-content {
64  transform: scale(0.96);
65}
66
67.card:hover .card-image svg {
68  transform: scale(1.05);
69}
70
71.card:active {
72  transform: scale(0.9);
73}