<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
</div>
<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
<img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards">
</div>
<div class="s-gallery">
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
<a href="#"><img src="https://media.24ways.org/2013/baxter/indexcards.jpg" alt="Index cards"></a>
</div>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
}
}
.s-gallery {
display: flex;
@media (--upto-medium-screen) {
flex-direction: column;
}
img {
display: block;
max-width: 100%;
}
> * {
flex: 1 1 auto;
width: 100%;
height: 100%;
}
> *:not(:last-of-type) {
@media (--upto-medium-screen) {
margin-bottom: 2%;
}
@media (--from-medium-screen) {
margin-right: 2%;
}
}
> *:nth-last-of-type(2):first-child,
> *:nth-last-of-type(2):first-child ~ * {
@media (--from-medium-screen) {
width: 48%;
}
}
> *:nth-last-of-type(3):first-child,
> *:nth-last-of-type(3):first-child ~ * {
@media (--from-medium-screen) {
width: 31.3334%;
}
}
> *:nth-last-of-type(4):first-child,
> *:nth-last-of-type(4):first-child ~ * {
@media (--from-medium-screen) {
width: 23%;
}
}
}
There are no notes for this item.