1.card {
2  width: 190px;
3  height: 254px;
4  overflow: visible;
5  cursor: pointer;
6  position: relative;
7}
8
9.card::before, .content {
10  border-radius: 5px;
11  box-shadow: 0px 0px 5px 1px #00000022;
12  transition: transform 300ms, box-shadow 200ms;
13}
14
15.card::before {
16  position: absolute;
17  content: ' ';
18  display: block;
19  width: 100%;
20  height: 100%;
21  background-color: #ee9933;
22  transform: rotateZ(5deg);
23}
24
25.description {
26  width: 100%;
27  text-align: center;
28  margin-top: 20px;
29}
30
31.info {
32  color: #00000066;
33}
34
35.price::before {
36  content: '$';
37}
38
39.price {
40  font-weight: bold;
41  color: #ee9933;
42}
43
44.description p {
45  margin-bottom: 10px;
46}
47
48.card .content {
49  position: absolute;
50  width: 100%;
51  height: 100%;
52  background-color: white;
53  padding: 20px;
54  display: flex;
55  flex-direction: column;
56  align-items: center;
57  transform: rotateZ(-5deg);
58}
59
60.content .img {
61  width: 150px;
62  height: fit-content;
63}
64
65.card:hover::before, .card:hover .content {
66  transform: rotateZ(0deg);
67}
68
69.card:active::before, .card:active .content {
70  box-shadow: none;
71}