ReactJS

1
.textContent > * {
2
    flex: 1 1 100%;
3
}
4

5
.textContent {
6
    display: flex;
7
    flex-flow: row wrap;
8
}
9

10
.textContent > * + * {
11
    padding: 7px 0 0;
12
}
13

14
.metaData {
15
    display: flex;
16
    flex-flow: row nowrap;
17
    align-items: center;
18
    font-size: 10px;
19
    line-height: 12px;
20
}
21

22
.publishedLabel {
23
    display: none;
24
}
25

26
.createdAt, .createdAt span {
27
    color: var(--grey99);
28
}
29

30
.title {
31
    font-size: 16px;
32
    line-height: 19px;
33
    font-weight: normal;
34
    margin: 0;
35
}
36

37
.postLink {
38
    overflow: hidden;
39
    -webkit-line-clamp: 2;
40
    -webkit-box-orient: vertical;
41
    display: -webkit-box;
42
}
43

44
.postLink::after {
45
    content: '';
46
    position: absolute;
47
    top: 0;
48
    right: 0;
49
    bottom: 0;
50
    left: 0;
51
}
52

53
@media all and (min-width: 1024px) {
54
    .textContent {
55
        flex-basis: 540px;
56
        order: 1;
57
        margin: 0 0 0 38px;
58
        flex-flow: column-reverse nowrap;
59
        justify-content: center;
60
    }
61

62
    .textContent > * {
63
        flex: 0 0;
64
    }
65

66
    .metaData {
67
        flex-flow: row-reverse nowrap;
68
        justify-content: flex-end;
69
        font-size: 14px;
70
        line-height: 16px;
71
    }
72

73
    .publishedLabel {
74
        display: inline;
75
    }
76

77
    .textContent {
78
        flex-basis: 540px;
79
        order: 1;
80
        margin: 0 0 0 38px;
81
        flex-flow: column-reverse nowrap;
82
        justify-content: center;
83
    }
84

85
    .textContent > * {
86
        flex: 0 0;
87
    }
88

89
    .title {
90
        padding: 0 0 10px 0;
91
        font-size: 20px;
92
        line-height: 23px;
93
    }
94

95
    .postLink {
96
        -webkit-line-clamp: 1;
97
    }
98
}
99

100
@media all and (min-width: 1540px) {
101
    .textContent {
102
        flex-basis: 672px;
103
    }
104
}