| ... |
... |
@@ -244,17 +244,30 @@ |
| 244 |
244 |
|
| 245 |
245 |
/* Responsive */ |
| 246 |
246 |
@media (max-width: 760px) { |
|
247 |
+ .services-grid { |
|
248 |
+ grid-template-columns: 1fr; |
|
249 |
+ row-gap: 20px; |
|
250 |
+ } |
|
251 |
+ |
| 247 |
247 |
.services-grid > article.service { |
| 248 |
|
- /* Mobile layout */ |
| 249 |
249 |
grid-template-columns: 40px 1fr; |
| 250 |
250 |
|
| 251 |
|
- /* Always reset border on mobile */ |
| 252 |
|
- border-top: 1px solid @line; |
|
255 |
+ &:nth-of-type(-n + 1) { |
|
256 |
+ border-top: none; |
|
257 |
+ } |
|
258 |
+ |
|
259 |
+ > i { |
|
260 |
+ width: 36px; |
|
261 |
+ height: 36px; |
|
262 |
+ font-size: 16px; |
|
263 |
+ } |
| 253 |
253 |
} |
| 254 |
254 |
|
| 255 |
|
- /* Only the FIRST item has no border on mobile */ |
| 256 |
|
- .services-grid > article.service:nth-of-type(1) { |
| 257 |
|
- border-top: none; |
|
266 |
+ /* On mobile, just stack normally */ |
|
267 |
+ .services-grid > article.service:nth-last-child(1):nth-child(odd) { |
|
268 |
+ grid-column: auto; |
|
269 |
+ max-width: 100%; |
|
270 |
+ justify-self: stretch; |
| 258 |
258 |
} |
| 259 |
259 |
} |
| 260 |
260 |
|
