1.post-card {
2  width: 320px;
3  background: lightgrey;
4  background-color: rgb(24 27 32);
5  border: 1px solid rgb(84 90 106);
6  border-radius: 20px;
7  color: white;
8  display: flex;
9  flex-direction: column;
10  padding: 10px 20px;
11}
12
13.avatar {
14  height: 35px;
15  width: 35px;
16  border-radius: 50%;
17  background-color: blueviolet;
18  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
19}
20
21.title {
22  font-size: 20px;
23  line-height: 22px;
24  font-weight: 600;
25  margin-top: 10px;
26  color: #fff;
27  text-decoration: none;
28  transition: all .35s ease-in;
29}
30
31.title:hover {
32  text-decoration: underline blueviolet;
33}
34
35.datetime {
36  font-size: 12px;
37  color: rgb(168 179 207);
38  margin: 10px 0;
39}
40
41.image-preview {
42  flex: 1;
43  min-height: 150px;
44  width: 100%;
45  border-radius: 20px;
46  background-color: blueviolet;
47  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
48  margin-bottom: 4px;
49}
50
51.comment-like {
52  display: flex;
53  justify-content: space-around;
54  align-items: center;
55  padding: 2px 0;
56}
57
58.comment-like span {
59  cursor: pointer;
60  height: 40px;
61  width: 50px;
62  padding: 0 3px;
63  display: flex;
64  align-items: center;
65  justify-content: center;
66  font-weight: 900;
67  border-radius: 10px;
68  background-color: transparent;
69  transition: all .15s ease;
70}
71
72.comment-like span:hover {
73  background-color: rgba(137, 43, 226, 0.096);
74}
75
76.comment-like span svg {
77  fill: rgb(255, 255, 255);
78  margin-right: 2px;
79}