extends template

block title
  title GroundworkCSS Layouts: Image Gallery

block content
  .container.modal.gallery
    .pad-left.pad-right
      h1.AverageSans.zero Example Layouts: Image Gallery
      p An adaptive image gallery layout
    article.row
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.green.tooltip(href="http://placehold.it/900x500/2ecc71/ffffff/&text=Image+1", title="View Larger Image")
          img.round(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Image+1", alt="Image 1")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.blue.tooltip(href="http://placehold.it/900x500/3498db/ffffff/&text=Image+2", title="View Larger Image")
          img(src="http://placehold.it/300x300/3498db/ffffff/&text=Image+2", alt="Image 2")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.purple.tooltip(href="http://placehold.it/900x500/9b59b6/ffffff/&text=Image+3", title="View Larger Image")
          img(src="http://placehold.it/300x300/9b59b6/ffffff/&text=Image+3", alt="Image 3")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.yellow.tooltip(href="http://placehold.it/900x500/f1c40f/ffffff/&text=Image+4", title="View Larger Image")
          img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Image+4", alt="Image 4")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.orange.tooltip(href="http://placehold.it/900x500/e67e22/ffffff/&text=Image+5", title="View Larger Image")
          img(src="http://placehold.it/300x300/e67e22/ffffff/&text=Image+5", alt="Image 5")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.red.tooltip(href="http://placehold.it/900x500/e74c3c/ffffff/&text=Image+6", title="View Larger Image")
          img(src="http://placehold.it/300x300/e74c3c/ffffff/&text=Image+6", alt="Image 6")
    article.row
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.pink.tooltip(href="http://placehold.it/900x500/f02475/ffffff/&text=Image+7", title="View Larger Image")
          img(src="http://placehold.it/300x300/f02475/ffffff/&text=Image+7", alt="Image 7")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.turquoise.tooltip(href="http://placehold.it/900x500/1abc9c/ffffff/&text=Image+8", title="View Larger Image")
          img(src="http://placehold.it/300x300/1abc9c/ffffff/&text=Image+8", alt="Image 8")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.asphalt.tooltip(href="http://placehold.it/900x500/34495e/ffffff/&text=Image+9", title="View Larger Image")
          img(src="http://placehold.it/300x300/34495e/ffffff/&text=Image+9", alt="Image 9")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.green.tooltip(href="http://placehold.it/900x500/2ecc71/ffffff/&text=Image+10", title="View Larger Image")
          img(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Image+10", alt="Image 10")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.blue.tooltip(href="http://placehold.it/900x500/3498db/ffffff/&text=Image+11", title="View Larger Image")
          img(src="http://placehold.it/300x300/3498db/ffffff/&text=Image+11", alt="Image 11")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.purple.tooltip(href="http://placehold.it/900x500/9b59b6/ffffff/&text=Image+12", title="View Larger Image")
          img(src="http://placehold.it/300x300/9b59b6/ffffff/&text=Image+12", alt="Image 12")
    article.row
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.yellow.tooltip(href="http://placehold.it/900x500/f1c40f/ffffff/&text=Image+13", title="View Larger Image")
          img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Image+13", alt="Image 13")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.orange.tooltip(href="http://placehold.it/900x500/e67e22/ffffff/&text=Image+14", title="View Larger Image")
          img(src="http://placehold.it/300x300/e67e22/ffffff/&text=Image+14", alt="Image 14")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.red.tooltip(href="http://placehold.it/900x500/e74c3c/ffffff/&text=Image+15", title="View Larger Image")
          img(src="http://placehold.it/300x300/e74c3c/ffffff/&text=Image+15", alt="Image 15")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.pink.tooltip(href="http://placehold.it/900x500/f02475/ffffff/&text=Image+16", title="View Larger Image")
          img(src="http://placehold.it/300x300/f02475/ffffff/&text=Image+16", alt="Image 16")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.turquoise.tooltip(href="http://placehold.it/900x500/1abc9c/ffffff/&text=Image+17", title="View Larger Image")
          img(src="http://placehold.it/300x300/1abc9c/ffffff/&text=Image+17", alt="Image 17")
      .one.sixth.three-up-small-tablet.two-up-mobile.padded
        a.block.asphalt.tooltip(href="http://placehold.it/900x500/34495e/ffffff/&text=Image+18", title="View Larger Image")
          img(src="http://placehold.it/300x300/34495e/ffffff/&text=Image+18", alt="Image 18")