- var max = 18
- var imgstr = 511
div#gallery
  - for(var n=1; n<=max; n++)
    div
      img(src= 'https://picsum.photos/600/600/?image='+(imgstr + n))
      a(href='#lightbox-'+n)= (imgstr + n)

- for(var n=1; n<=max;n++)
  div.lightbox(id="lightbox-"+n)
    div.content
      img(src='https://picsum.photos/1920/1080/?image='+(imgstr+n))
      .title No. <b>#{imgstr+n}</b> from Picsum
      a.close(href='#gallery')
 


  

* {
  box-sizing: border-box;
}
body {
  margin: 5px;
  position: relative;
}
$size: 6;
#gallery {
  display: grid;
  height: calc(100vh - 10px);
  grid-template: repeat($size, 1fr) / repeat($size, 1fr);
  grid-gap: 0.5em;
  @media (max-width: 800px) {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    & > div {
      width: 48%;
      margin: 1%;
      @media (max-width: 350px) {
        width: 98%;
      }
    }
  }
  & > div {
    //Grid Structure
    &:nth-child(#{$size}n + 1) {
      grid-column: span 2;
      grid-row: span 2;
    }
    &:nth-child(2) {
      grid-column: span 3;
      grid-row: span 3;
    }
    &:nth-child(4) {
      grid-column: span 1;
      grid-row: span 2;
    }
    & > a {
      opacity: 0;
      position: absolute;
      color: #000;
      background-color: #000;
      font: bold 4em "Helvetica";
      $shadow: 5px #fff;
      text-shadow: 0 -1px $shadow, -1px 0px $shadow, 0 1px $shadow,
        1px 0px $shadow;
      padding: 2rem;
      mix-blend-mode: difference;
      width: 100%;
      height: 100%;
      transition: all ease 1s;
    }
    & > img {
      width: 100%;
      min-height: 100%;
      transition: all ease 1s;
    }
    &:hover {
      img {
        filter: blur(4px);
      }
      a {
        opacity: 1;
      }
    }
  }
  & > div {
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
  }
  div,
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
}
//
// lightbox
//
[id^="lightbox-"] {
  &:target {
    opacity:1;
    pointer-events:inherit;
    img{
      filter:blur(0);
    }
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(black, 0.5);
  display: flex;
  opacity:0;
  transition: opacity 450ms ease-in-out;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  .content {
    max-width: 90%;
    position: relative;
    color: #fff;
    &:hover > a.close {
      opacity: 1;
      transform: scale(1, 1);
    }
    &:hover > .title {
      opacity: 1;
      transform: translateY(-3px); //Fix extra line at end
      &::after{
        opacity:1;
      }
    }
    & > * {
      transition: all 450ms ease-in-out;
    }
  }
  .title {
    display: block;
    margin: 0;
    padding: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(50%);
    font-size:1.5em;
    opacity:0;
    &::after{
      content: ' ';
      background-color: rgba(black, 0.4);
      bottom:0;
      left:0;
      height:100%;
      width:100%;
      position:absolute;
      transition: all 350ms ease-in-out 250ms;
      opacity:0;
      transform-origin:bottom;
      mix-blend-mode: soft-light;
    }
  }
  img {
    max-height: 90vh;
    max-width: 100%;
    margin: 0;
    padding: 0;
    filter: blur(50px);
  }
  a.close {
    width: 2em;
    height: 2em;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(black, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0, 0);
    opacity: 0;
    transform-origin: right top;
    text-decoration:none;
    color:#fff;
    &::after {
      content: "X";
    }
  }
}