PluginProbe
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets / 4.1.9
Ultimate Post Kit – Elementor Post Grid, Post Carousel, Post Slider & Blog Layout Widgets v4.1.9
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 4.1.9, at assets/css/upk-alter-grid.css

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