Card by Na3ar-17

1.card {
2  padding: 0;
3  margin: 0;
4  box-sizing: border-box;
5  font-family: Arial, Helvetica, sans-serif;
6  width: 285px;
7  padding: 8px;
8  background-color: #282727;
9  border-radius: 8px;
10  display: flex;
11  flex-direction: column;
12  cursor: pointer;
13  aspect-ratio: 16/12;
14  transition: all 0.3s ease;
15}
16
17.card .no-image {
18  border: 2px dashed #373737;
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  border-radius: 8px;
23  aspect-ratio: 16/8;
24}
25
26.card .no-image .icon {
27  width: 60px;
28  color: #373737;
29}
30
31.card .image {
32  width: 100%;
33  aspect-ratio: 16/8;
34}
35
36.card .image .picture {
37  border-radius: 8px;
38  width: inherit;
39  aspect-ratio: 16/8;
40}
41
42.card .content {
43  display: flex;
44  flex-direction: column;
45  padding-top: 12px;
46  padding-left: 4px;
47}
48
49.card .content .name {
50  font-size: 1.5rem;
51  color: #ffffff;
52}
53
54.card .content .time {
55  padding-top: 12px;
56  font-size: 0.875rem;
57  color: #c5c5c5;
58}
59
60.card:hover {
61  -webkit-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
62  -moz-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
63  box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
64}
65