1/* this card is inspired form this - https://georgefrancis.dev/ */
2
3.card {
4  --border-radius: 0.75rem;
5  --primary-color: #7257fa;
6  --secondary-color: #3c3852;
7  width: 210px;
8  font-family: "Arial";
9  padding: 1rem;
10  cursor: pointer;
11  border-radius: var(--border-radius);
12  background: #f1f1f3;
13  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
14  position: relative;
15}
16
17.card > * + * {
18  margin-top: 1.1em;
19}
20
21.card .card__content {
22  color: var(--secondary-color);
23  font-size: 0.86rem;
24}
25
26.card .card__title {
27  padding: 0;
28  font-size: 1.3rem;
29  font-weight: bold;
30}
31
32.card .card__date {
33  color: #6e6b80;
34  font-size: 0.8rem;
35}
36
37.card .card__arrow {
38  position: absolute;
39  background: var(--primary-color);
40  padding: 0.4rem;
41  border-top-left-radius: var(--border-radius);
42  border-bottom-right-radius: var(--border-radius);
43  bottom: 0;
44  right: 0;
45  transition: 0.2s;
46  display: flex;
47  justify-content: center;
48  align-items: center;
49}
50
51.card svg {
52  transition: 0.2s;
53}
54
55/* hover */
56.card:hover .card__title {
57  color: var(--primary-color);
58  text-decoration: underline;
59}
60
61.card:hover .card__arrow {
62  background: #111;
63}
64
65.card:hover .card__arrow svg {
66  transform: translateX(3px);
67}