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