#grid-image-1 {
  background-image: url(../images/work/monster/1.jpg);
  background-size: contain;
}

#grid-image-2 {
  background-image: url(../images/work/monster/2.jpg);
  background-size: contain;
}

#grid-image-3 {
  background-image: url(../images/work/monster/3.jpg);
  background-size: contain;
}

#grid-image-4 {
  background-image: url(../images/work/monster/4.jpg);
  background-size: contain;
}

#grid-image-5 {
  background-image: url(../images/work/monster/5.jpg);
  background-size: contain;
}

#grid-image-6 {
  background-image: url(../images/work/monster/6.jpg);
  background-size: contain;
}

#grid-image-7 {
  background-image: url(../images/work/monster/7.jpg);
  background-size: contain;
}

#grid-image-8 {
  background-image: url(../images/work/monster/8.jpg);
}

#grid-image-9 {
  background-image: url(../images/work/monster/9.jpg);
}

#grid-image-10 {
  background-image: url(../images/work/monster/10.jpg);
}

#grid-image-11 {
  background-image: url(../images/work/monster/11.jpg);
}

#grid-image-12 {
  background-image: url(../images/work/monster/12.jpg);
  background-size: contain;
}

#grid-image-13 {
  background-image: url(../images/work/monster/13.jpg);
  background-size: contain;
}

#grid-image-14 {
  background-image: url(../images/work/monster/14.jpg);
  background-size: contain;
}

#grid-image-15 {
  background-image: url(../images/work/monster/15.jpg);
}

#grid-image-16 {
  background-image: url(../images/work/monster/16.jpg);
}

#grid-image-17 {
  background-image: url(../images/work/monster/17.jpg);
}

#grid-image-18 {
  background-image: url(../images/work/monster/18.jpg);
}

#grid-image-19 {
  background-image: url(../images/work/monster/19.jpg);
  background-size: contain;
}

#grid-image-20 {
  background-image: url(../images/work/monster/20.jpg);
  background-size: contain;
}

#grid-image-21 {
  background-image: url(../images/work/monster/21.jpg);
  background-size: contain;
}

#grid-image-22 {
  background-image: url(../images/work/monster/22.jpg);
  background-size: contain;
}

#grid-image-19,
#grid-image-20,
#grid-image-21,
#grid-image-22 {
  position: relative;
}

@media only screen and (max-width: 1200px){
  #grid-image-19,
  #grid-image-20,
  #grid-image-21,
  #grid-image-22 {
    grid-column: span 6 / auto;
    background-size: cover;
  }
}

@media only screen and (max-width: 900px){
  #grid-image-10,
  #grid-image-11 {
    grid-row: span 2 / auto;
  }
}

@media only screen and (max-width: 700px){
  #grid-image-1,
  #grid-image-2,
  #grid-image-5,
  #grid-image-7 {
    grid-column: span 3 / auto;
  }

  #grid-image-4,
  #grid-image-8,
  #grid-image-9 {
    grid-row: span 1 / auto;
  }

  #grid-image-12,
  #grid-image-13,
  #grid-image-14 {
    grid-column: span 2 / auto;
    grid-row: span 1 / auto;
  }

  #grid-image-15,
  #grid-image-16,
  #grid-image-17,
  #grid-image-18 {
    background-size: cover;
  }

  #grid-image-8,
  #grid-image-9 {
    grid-column: span 6 / auto;
  }

}



@media only screen and (max-width: 480px){
  #grid-image-1,
  #grid-image-2,
  #grid-image-5,
  #grid-image-7, 
  #grid-image-4,
  #grid-image-8,
  #grid-image-9,
  #grid-image-10,
  #grid-image-11,
  #grid-image-12,
  #grid-image-13,
  #grid-image-14,
  #grid-image-15,
  #grid-image-16,
  #grid-image-17,
  #grid-image-18,
  #grid-image-19,
  #grid-image-20,
  #grid-image-21,
  #grid-image-22 {
    grid-row: span 1 / auto;
  }
}