PluginProbe
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets / trunk
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets vtrunk
4.5.4 4.2.1 4.2.2 4.2.3 4.5.0 4.5.2 4.5.3 4.2.0 4.1.18 4.1.17 4.1.16 4.1.15 4.1.14 4.1.13 4.1.12 4.1.11 4.1.10 4.1.9 4.1.8 4.0.9 4.1.0 4.1.1 4.1.2 4.1.3 4.1.4 All 146 releases
ultimate-post-kit / assets / css / upk-alter-grid.css

upk-alter-grid.css in Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets trunk, at assets/css/upk-alter-grid.css

543 lines 21.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .upk-alter-grid .upk-post-grid {
2 display: grid;
3 grid-gap: 20px;
4 }
5 .upk-alter-grid .upk-item {
6 position: relative;
7 display: flex;
8 overflow: hidden;
9 transition: all 0.3s ease;
10 }
11 .upk-alter-grid .upk-item:hover .upk-img {
12 transform: scale(1.1);
13 }
14 .upk-alter-grid .upk-item:hover .upk-readmore-on-image .upk-readmore-icon:before {
15 left: 0;
16 width: 50px;
17 background: #ffffff;
18 transition-delay: 0.1s;
19 opacity: 1;
20 }
21 .upk-alter-grid .upk-item:hover .upk-readmore-on-image .upk-readmore-icon span:before,
22 .upk-alter-grid .upk-item:hover .upk-readmore-on-image .upk-readmore-icon span:after {
23 left: 21px;
24 background: #ffffff;
25 opacity: 1;
26 }
27 .upk-alter-grid .upk-item:hover .upk-readmore-on-image .upk-readmore-icon span:after {
28 transform: scale(1) rotate(-45deg);
29 }
30 .upk-alter-grid .upk-item:hover .upk-readmore-on-image .upk-readmore-icon span:before {
31 transform: scale(1) rotate(45deg);
32 }
33 .upk-alter-grid .upk-item-box {
34 position: relative;
35 display: flex;
36 flex-direction: column;
37 width: 100%;
38 }
39 .upk-alter-grid .upk-img-wrap {
40 position: relative;
41 display: flex;
42 }
43 .upk-alter-grid .upk-img-wrap .upk-main-img {
44 overflow: hidden;
45 display: flex;
46 width: 100%;
47 }
48 .upk-alter-grid .upk-img-wrap .upk-main-img .upk-img {
49 width: 100%;
50 height: 100%;
51 object-fit: cover;
52 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
53 }
54 .upk-alter-grid .upk-content {
55 display: flex;
56 padding: 30px;
57 height: 100%;
58 }
59 .upk-alter-grid .upk-content > div {
60 display: flex;
61 flex-direction: column;
62 }
63 .upk-alter-grid .upk-category {
64 margin-bottom: 10px;
65 z-index: 1;
66 }
67 .upk-alter-grid .upk-category a {
68 color: #909aae;
69 font-size: 11px;
70 font-weight: 600;
71 text-transform: uppercase;
72 letter-spacing: 1.1px;
73 transition: all 0.3s ease-in-out;
74 background-clip: padding-box;
75 -moz-background-clip: padding;
76 -webkit-background-clip: padding;
77 white-space: nowrap;
78 }
79 .upk-alter-grid .upk-category a:hover {
80 color: #EF233C;
81 }
82 .upk-alter-grid .upk-title {
83 margin-top: 0;
84 line-height: 1.4;
85 font-weight: 600;
86 }
87 .upk-alter-grid .upk-title a {
88 color: #2B2D42;
89 transition: all 0.5s ease;
90 }
91 .upk-alter-grid .upk-title a:hover {
92 color: #EF233C;
93 }
94 .upk-alter-grid .upk-text-wrap {
95 flex-grow: 1;
96 }
97 .upk-alter-grid .upk-text-wrap .upk-text {
98 line-height: 1.5;
99 letter-spacing: 0.5px;
100 color: #8D99AE;
101 }
102 .upk-alter-grid .upk-text-wrap .upk-text p {
103 margin: 0;
104 }
105 .upk-alter-grid .upk-meta {
106 display: inline-flex;
107 align-items: center;
108 font-size: 12px;
109 color: #8D99AE;
110 text-transform: uppercase;
111 font-weight: 600;
112 line-height: 1;
113 }
114 .upk-alter-grid .upk-meta .author-name {
115 color: #8D99AE;
116 }
117 .upk-alter-grid .upk-meta .upk-post-time {
118 margin-left: 5px;
119 }
120 .upk-alter-grid .upk-meta .upk-post-time i {
121 margin-right: 2px;
122 }
123 .upk-alter-grid .upk-meta .upk-separator {
124 margin: 0 6px;
125 }
126 .upk-alter-grid .upk-meta > div {
127 position: relative;
128 display: inline-flex;
129 }
130 .upk-alter-grid .upk-meta > div:before {
131 content: attr(data-separator);
132 margin: 0 5px;
133 }
134 .upk-alter-grid .upk-meta > div:nth-child(1)::before {
135 display: none;
136 }
137 .upk-alter-grid .upk-readmore {
138 color: #2B2D42;
139 font-size: 14px;
140 font-weight: 600;
141 letter-spacing: 0.5px;
142 margin: 20px 0;
143 transition: all 0.3s ease;
144 }
145 .upk-alter-grid .upk-readmore:hover {
146 color: #EF233C;
147 }
148 .upk-alter-grid .upk-readmore-on-image {
149 position: absolute;
150 height: 100%;
151 width: 100%;
152 }
153 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon {
154 position: absolute;
155 left: calc(50% - 25px);
156 top: 50%;
157 transform: translate(-50%, -50%);
158 }
159 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon:before {
160 content: "";
161 position: absolute;
162 left: -30px;
163 height: 5px;
164 width: 0;
165 background: rgba(255, 255, 255, 0.5);
166 transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
167 opacity: 0;
168 }
169 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon span:before,
170 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon span:after {
171 content: "";
172 position: absolute;
173 left: -15px;
174 width: 40px;
175 height: 5px;
176 background: transparent;
177 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
178 opacity: 0;
179 }
180 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon span:after {
181 transform: scale(0.7) rotate(-45deg);
182 bottom: -17px;
183 }
184 .upk-alter-grid .upk-readmore-on-image .upk-readmore-icon span:before {
185 transform: scale(0.7) rotate(45deg);
186 top: -13px;
187 }
188 .upk-alter-grid .upk-readmore-on-image:before {
189 content: "";
190 position: absolute;
191 width: 100%;
192 height: 100%;
193 }
194 .upk-alter-grid .upk-post-format a {
195 position: absolute;
196 bottom: 0;
197 right: 0;
198 padding: 14px;
199 color: #2B2D42;
200 background: #fff;
201 font-size: 14px;
202 display: inline-flex;
203 transition: all 0.3s ease;
204 }
205 .upk-alter-grid .upk-style-1 {
206 grid-template-columns: repeat(1, 1fr);
207 }
208 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-content {
209 padding: 30px;
210 align-items: flex-start;
211 }
212 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-title {
213 margin-bottom: 10px;
214 font-size: 16px;
215 }
216 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-text-wrap {
217 margin-bottom: 20px;
218 }
219 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-text-wrap .upk-text {
220 font-size: 13px;
221 }
222 .upk-alter-grid .upk-style-2 {
223 grid-template-columns: repeat(6, 1fr);
224 }
225 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) {
226 grid-column: span 6/auto;
227 grid-row: span 3/auto;
228 }
229 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-content {
230 align-items: center;
231 }
232 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-title {
233 margin-bottom: 10px;
234 font-size: 16px;
235 }
236 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-text-wrap {
237 margin-bottom: 20px;
238 }
239 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-text-wrap .upk-text {
240 font-size: 13px;
241 }
242 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) {
243 grid-column: span 6/auto;
244 }
245 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-item-box {
246 display: flex;
247 flex-direction: inherit;
248 }
249 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-img-wrap .upk-main-img {
250 width: 120px;
251 }
252 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-content {
253 padding: 10px;
254 align-items: center;
255 }
256 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-title {
257 margin-bottom: 2px;
258 font-size: 12px;
259 flex-grow: 1;
260 }
261 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-category,
262 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-category,
263 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-category,
264 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-text-wrap {
265 display: none;
266 }
267 .upk-alter-grid .upk-style-3 {
268 grid-template-columns: repeat(6, 1fr);
269 }
270 .upk-alter-grid .upk-style-3 .upk-item:nth-child(1) {
271 grid-column: span 6/auto;
272 }
273 .upk-alter-grid .upk-style-3 .upk-item:nth-child(1) .upk-content {
274 align-items: center;
275 }
276 .upk-alter-grid .upk-style-3 .upk-item:nth-child(1) .upk-title {
277 margin-bottom: 10px;
278 font-size: 16px;
279 }
280 .upk-alter-grid .upk-style-3 .upk-item:nth-child(1) .upk-text-wrap {
281 margin-bottom: 20px;
282 }
283 .upk-alter-grid .upk-style-3 .upk-item:nth-child(1) .upk-text-wrap .upk-text {
284 font-size: 13px;
285 }
286 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) {
287 grid-column: span 6/auto;
288 }
289 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content {
290 padding: 20px;
291 align-items: center;
292 }
293 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-title {
294 margin-bottom: 10px;
295 font-size: 16px;
296 flex-grow: 1;
297 }
298 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-category,
299 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-category,
300 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-category,
301 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-category,
302 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-text-wrap {
303 display: none;
304 }
305
306 .upk-primary-meta-end-position--yes .upk-style-1 .upk-item:nth-child(n+1) .upk-content {
307 align-items: inherit;
308 }
309 .upk-primary-meta-end-position--yes .upk-style-2 .upk-item:nth-child(4n+1) .upk-content,
310 .upk-primary-meta-end-position--yes .upk-style-3 .upk-item:nth-child(5n+1) .upk-content {
311 align-items: inherit;
312 }
313
314 .upk-secondary-meta-end-position--yes .upk-style-2 .upk-item:nth-child(4n+2) .upk-content, .upk-secondary-meta-end-position--yes .upk-style-2 .upk-item:nth-child(4n+3) .upk-content, .upk-secondary-meta-end-position--yes .upk-style-2 .upk-item:nth-child(4n+4) .upk-content {
315 align-items: inherit;
316 }
317 .upk-secondary-meta-end-position--yes .upk-style-3 .upk-item:nth-child(5n+2) .upk-content, .upk-secondary-meta-end-position--yes .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, .upk-secondary-meta-end-position--yes .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, .upk-secondary-meta-end-position--yes .upk-style-3 .upk-item:nth-child(5n+5) .upk-content {
318 align-items: inherit;
319 }
320
321 .upk-global-link-yes .upk-alter-grid .upk-item:hover {
322 cursor: pointer;
323 }
324
325 .upk-content-on-image-yes .upk-alter-grid .upk-item:hover .upk-content {
326 height: 100% !important;
327 }
328 .upk-content-on-image-yes .upk-alter-grid .upk-item:hover .upk-readmore,
329 .upk-content-on-image-yes .upk-alter-grid .upk-item:hover .upk-meta,
330 .upk-content-on-image-yes .upk-alter-grid .upk-item:hover .upk-text {
331 opacity: 1;
332 }
333 .upk-content-on-image-yes .upk-alter-grid .upk-item:hover .upk-meta {
334 transition-delay: 0.2s;
335 }
336 .upk-content-on-image-yes .upk-alter-grid .upk-content {
337 position: absolute;
338 height: 150px;
339 bottom: 0;
340 background-color: rgba(0, 0, 0, 0.15);
341 transition: all 0.3s ease-in-out;
342 }
343 .upk-content-on-image-yes .upk-alter-grid .upk-readmore,
344 .upk-content-on-image-yes .upk-alter-grid .upk-meta,
345 .upk-content-on-image-yes .upk-alter-grid .upk-text {
346 opacity: 0;
347 transition: all 0.3s ease;
348 }
349 .upk-content-on-image-yes .upk-alter-grid .upk-readmore,
350 .upk-content-on-image-yes .upk-alter-grid .upk-text,
351 .upk-content-on-image-yes .upk-alter-grid .upk-meta,
352 .upk-content-on-image-yes .upk-alter-grid .upk-meta a,
353 .upk-content-on-image-yes .upk-alter-grid .upk-title a,
354 .upk-content-on-image-yes .upk-alter-grid .upk-category a {
355 color: #ffffff;
356 }
357 .upk-content-on-image-yes .upk-alter-grid .upk-readmore-on-image {
358 display: none;
359 }
360
361 @media only screen and (min-width: 600px) {
362 .upk-alter-grid .upk-style-1 {
363 grid-template-columns: repeat(3, 1fr);
364 }
365 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-category a {
366 font-size: 12px;
367 }
368 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-title {
369 margin-bottom: 20px;
370 font-size: 20px;
371 }
372 .upk-alter-grid .upk-style-1 .upk-item:nth-child(n+1) .upk-text-wrap .upk-text {
373 font-size: 15px;
374 }
375 .upk-alter-grid .upk-style-2.upk-post-grid {
376 grid-template-columns: repeat(8, 1fr);
377 }
378 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) {
379 grid-column: span 5/auto;
380 }
381 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-item-box {
382 display: flex;
383 flex-direction: row;
384 }
385 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-img-wrap {
386 max-width: 50%;
387 min-width: 50%;
388 }
389 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-category a {
390 font-size: 12px;
391 }
392 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-title {
393 margin-bottom: 20px;
394 font-size: 20px;
395 }
396 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-text-wrap .upk-text {
397 font-size: 15px;
398 }
399 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) {
400 grid-column: span 3/auto;
401 display: flex;
402 }
403 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-item-box {
404 display: flex;
405 flex-direction: row;
406 }
407 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-img-wrap .upk-main-img {
408 width: 130px;
409 }
410 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-content {
411 padding: 15px;
412 }
413 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-title {
414 margin-bottom: 10px;
415 line-height: 1.3;
416 font-size: 16px;
417 flex-grow: 1;
418 }
419 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-category,
420 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-category,
421 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-category,
422 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-text-wrap {
423 display: none;
424 }
425 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) {
426 grid-column: span 4/auto;
427 }
428 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-item-box {
429 display: flex;
430 flex-direction: row;
431 }
432 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-img-wrap {
433 max-width: 50%;
434 min-width: 50%;
435 }
436 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-category a {
437 font-size: 12px;
438 }
439 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-title {
440 margin-bottom: 20px;
441 font-size: 20px;
442 }
443 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-text-wrap .upk-text {
444 font-size: 15px;
445 }
446 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) {
447 grid-column: span 2/auto;
448 }
449 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content {
450 padding: 20px 25px;
451 }
452 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-title {
453 line-height: 1.3;
454 font-size: 18px;
455 }
456 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-category,
457 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-category,
458 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-category,
459 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-category,
460 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-text-wrap {
461 display: none;
462 }
463 }
464 @media only screen and (min-width: 600px) and (max-width: 1024px) {
465 .upk-alter-grid .upk-style-1 {
466 grid-template-columns: repeat(2, 1fr);
467 }
468 .upk-alter-grid .upk-style-2.upk-post-grid {
469 grid-template-columns: repeat(6, 1fr);
470 }
471 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) {
472 grid-column: span 6/auto;
473 }
474 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-item-box {
475 display: flex;
476 }
477 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-category a {
478 font-size: 12px;
479 }
480 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-title {
481 margin-bottom: 20px;
482 font-size: 16px;
483 flex-grow: 1;
484 }
485 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+1) .upk-text-wrap .upk-text {
486 font-size: 14px;
487 }
488 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3), .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) {
489 grid-column: span 6/auto;
490 }
491 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-item-box, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-item-box {
492 display: flex;
493 }
494 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-img-wrap .upk-main-img, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-img-wrap .upk-main-img {
495 width: 140px;
496 }
497 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-content, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-content {
498 padding: 20px;
499 }
500 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-title, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-title {
501 margin-bottom: 10px;
502 font-size: 14px;
503 }
504 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-category,
505 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+2) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-category,
506 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+3) .upk-text-wrap, .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-category,
507 .upk-alter-grid .upk-style-2 .upk-item:nth-child(4n+4) .upk-text-wrap {
508 display: none;
509 }
510 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) {
511 grid-column: span 6/auto;
512 }
513 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-content {
514 padding: 19px 40px 20px;
515 }
516 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-title {
517 margin-bottom: 10px;
518 font-size: 16px;
519 }
520 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-text-wrap {
521 margin-bottom: 20px;
522 }
523 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+1) .upk-text-wrap .upk-text {
524 font-size: 13px;
525 }
526 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4), .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) {
527 grid-column: span 3/auto;
528 }
529 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-content, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-content {
530 padding: 19px 40px 20px;
531 }
532 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-title, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-title {
533 margin-bottom: 10px;
534 font-size: 16px;
535 }
536 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-category,
537 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+2) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-category,
538 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+3) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-category,
539 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+4) .upk-text-wrap, .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-category,
540 .upk-alter-grid .upk-style-3 .upk-item:nth-child(5n+5) .upk-text-wrap {
541 display: none;
542 }
543 }