body
  .wrapper
    h1 Image grid using flex box and CSS quantity queries
    // single image row
    figure
      .post-image
         img(src="https://unsplash.it/900/400/?random")
    // double image row
    figure
      .post-image
        img(src="https://unsplash.it/400/300/?random")
      .post-image
        img(src="https://unsplash.it/800/600/?random")
    // triple image row
    figure
      .post-image
        img(src="https://unsplash.it/375/250/?random")
      .post-image
        img(src="https://unsplash.it/396/264/?random")
      .post-image
        img(src="https://unsplash.it/399/266/?random")

body
  background #f0c24f
.wrapper
  margin 5em auto 0 auto
  max-width 800px
h1
  font-size 1.6em
  text-align center
  padding 1em
  color #3c605d
img
  max-width 100%
  display block
figure
  margin-bottom 1.8em
  display flex
  justify-content space-between
// If we have 2 images in the row change the width to about half...
.post-image:nth-last-child(n+2):nth-last-child(-n+2):first-child
.post-image:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ .post-image
  flex 0 1 48%
// if we have three images in the row change width to about a third
.post-image:nth-last-child(n+3):nth-last-child(-n+3):first-child
.post-image:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ .post-image
  flex 0 1 31%