/*img[data-src] {
  filter: blur(0.2em);
}*/

#gallery {
  display: grid;
  width: 90%;
  margin: 0 auto;
  margin-top: 25px;
  /* grid-gap: 25px; */
  grid-column-gap: 25px;
  grid-row-gap: 50px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, auto);
}

img[data-src] {
  filter: blur(0.2em);
  border: 5px solid skyblue;
}

figure {
  width: 100%;
  height: 100%;
  margin: 0;
}
img.galleryImage {
  filter: blur(0em);
  transition: filter 2.5s;
  width: 100%;
  height: 100%;
  margin: 0;
}

figcaption {
  background-color: #9ab6bb;
  display: block;
  text-align: center;
  line-height: 2em;
  justify-content: center;
  /* padding-bottom: 25px; */
  /* padding: 25px 0px; */
  /* height: 50; */
}

#img1 {
  grid-row: 1;
}
#img2 {
  grid-row: 2;
}
#img3 {
  grid-row: 3;
}
#img4 {
  grid-row: 4;
}
#img5 {
  grid-row: 5;
}
#img6 {
  grid-row: 6;
}
#img7 {
  grid-row: 7;
}
#img8 {
  grid-row: 8;
}
#img9 {
  grid-row: 9;
}

@media screen and (min-width: 768px) {
  /*medium Screen*/
  #gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(12, 1fr);
    margin: 25px auto;
  }

  #img1 {
    /*tall*/
    grid-column: 1/3;
    grid-row: 1/3;
  }
  #img2 {
    /*standard*/
    grid-column: 1/2;
    grid-row: 3/5;
  }
  #img3 {
    /*standard*/
    grid-column: 2/3;
    grid-row: 3/4;
  }
  #img4 {
    /*big*/
    grid-column: 2/3;
    grid-row: 4/5;
  }
  #img5 {
    /*standard*/
    grid-column: 1/3;
    grid-row: 5/7;
  }
  #img6 {
    /*standard*/
    grid-column: 1/2;
    grid-row: 7/9;
  }
  #img7 {
    /*tall*/
    grid-column: 2/3;
    grid-row: 7/9;
  }
  #img8 {
    /*standard*/
    grid-column: 1/3;
    grid-row: 9/11;
  }
  #img9 {
    /*standard*/
    grid-column: 1/3;
    grid-row: 11/13;
  }
}

@media screen and (min-width: 1200px) {
  /*Large Screen*/
  #gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    margin: 50px auto;
  }

  figure:hover {
    box-shadow: 5px 37.5px 5px black;
    transition: box-shadow 0.25s;
  }

  #img1 {
    /*tall*/
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #img2 {
    /*standard*/
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #img3 {
    /*standard*/
    grid-column: 3/4;
    grid-row: 1/2;
  }
  #img4 {
    /*big*/
    grid-column: 1/3;
    grid-row: 2/3;
  }
  #img5 {
    /*standard*/
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #img6 {
    /*standard*/
    grid-column: 3/4;
    grid-row: 2/4;
  }
  #img7 {
    /*tall*/
    grid-column: 1/2;
    grid-row: 4/6;
  }
  #img8 {
    /*standard*/
    grid-column: 2/4;
    grid-row: 4/5;
  }
  #img9 {
    /*standard*/
    grid-column: 2/4;
    grid-row: 5/6;
  }
}