<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
    ]
  }
}
  • Content:
    .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%;
        }
      }
    }
    
  • URL: /components/raw/gallery/gallery.css
  • Filesystem Path: src/components/scopes/gallery/gallery.css
  • Size: 836 Bytes

There are no notes for this item.