| ... |
... |
@@ -194,7 +194,7 @@ |
| 194 |
194 |
border-top: 1px solid @line; |
| 195 |
195 |
|
| 196 |
196 |
/* first row: no top border */ |
| 197 |
|
- &:nth-of-type(1) { |
|
197 |
+ &:nth-of-type(-n + 2) { |
| 198 |
198 |
border-top: none; |
| 199 |
199 |
} |
| 200 |
200 |
|
| ... |
... |
@@ -244,30 +244,17 @@ |
| 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 |
|
- |
| 252 |
252 |
.services-grid > article.service { |
|
248 |
+ /* Mobile layout */ |
| 253 |
253 |
grid-template-columns: 40px 1fr; |
| 254 |
254 |
|
| 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 |
|
- } |
|
251 |
+ /* Always reset border on mobile */ |
|
252 |
+ border-top: 1px solid @line; |
| 264 |
264 |
} |
| 265 |
265 |
|
| 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; |
|
255 |
+ /* Only the FIRST item has no border on mobile */ |
|
256 |
+ .services-grid > article.service:nth-of-type(1) { |
|
257 |
+ border-top: none; |
| 271 |
271 |
} |
| 272 |
272 |
} |
| 273 |
273 |
|
