1.card {
2  box-sizing: border-box;
3  display: flex;
4  max-width: 320px;
5  background-color: rgba(255, 255, 255, 1);
6  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
7}
8
9.card:hover {
10  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.081);
11}
12
13.date-time-container {
14  writing-mode: vertical-lr;
15  transform: rotate(180deg);
16  padding: 0.5rem;
17}
18
19.date-time {
20  display: flex;
21  align-items: center;
22  justify-content: space-between;
23  grid-gap: 1rem;
24  gap: 1rem;
25  font-size: 0.75rem;
26  line-height: 1rem;
27  font-weight: 700;
28  text-transform: uppercase;
29  color: rgba(17, 24, 39, 1);
30}
31
32.separator {
33  width: 1px;
34  flex: 1 1 0%;
35  background-color: rgba(17, 24, 39, 0.1);
36}
37
38.content {
39  display: flex;
40  flex: 1 1 0%;
41  flex-direction: column;
42  justify-content: space-between;
43}
44
45.infos {
46  border-left: 1px solid rgba(17, 24, 39, 0.1);
47  padding: 1rem;
48}
49
50.title {
51  font-weight: 700;
52  text-transform: uppercase;
53  font-size: 18.72px;
54  color: rgba(17, 24, 39, 1);
55}
56
57.description {
58  overflow: hidden;
59  display: -webkit-box;
60  -webkit-box-orient: vertical;
61  -webkit-line-clamp: 5;
62  line-clamp: 5;
63  margin-top: 0.5rem;
64  font-size: 0.875rem;
65  line-height: 1.25rem;
66  color: rgba(55, 65, 81, 1);
67}
68
69.action {
70  display: block;
71  background-color: rgba(253, 224, 71, 1);
72  padding: 0.75rem 1.25rem;
73  text-align: center;
74  font-size: 0.75rem;
75  line-height: 1rem;
76  font-weight: 700;
77  text-transform: uppercase;
78  color: rgba(17, 24, 39, 1);
79  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
80}
81
82.action:hover {
83  background-color: rgba(250, 204, 21, 1);
84}