1.card {
2  max-width: 300px;
3  border-radius: 0.5rem;
4  background-color: #fff;
5  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
6  border: 1px solid transparent;
7}
8
9.card a {
10  text-decoration: none
11}
12
13.content {
14  padding: 1.1rem;
15}
16
17.image {
18  object-fit: cover;
19  width: 100%;
20  height: 150px;
21  background-color: rgb(239, 205, 255);
22}
23
24.title {
25  color: #111827;
26  font-size: 1.125rem;
27  line-height: 1.75rem;
28  font-weight: 600;
29}
30
31.desc {
32  margin-top: 0.5rem;
33  color: #6B7280;
34  font-size: 0.875rem;
35  line-height: 1.25rem;
36}
37
38.action {
39  display: inline-flex;
40  margin-top: 1rem;
41  color: #ffffff;
42  font-size: 0.875rem;
43  line-height: 1.25rem;
44  font-weight: 500;
45  align-items: center;
46  gap: 0.25rem;
47  background-color: #2563EB;
48  padding: 4px 8px;
49  border-radius: 4px;
50}
51
52.action span {
53  transition: .3s ease;
54}
55
56.action:hover span {
57  transform: translateX(4px);
58}
59