* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #000;
  position: relative;
}

/* ---- grid ---- */
/* clearfix */
.grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  height: 200px;
  float: left;
  background-color: #F4F3F4;
  border: 4px solid #000;
  -webkit-filter: grayscale(70%) blur(0.5px);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background-image: url(https://unsplash.it/900/900);
  background-size: cover;
  background-position: center center;
  transition: all 0.35s ease-in-out;
}

.grid-item:hover {
  cursor: pointer;
  -webkit-filter: grayscale(0%) blur(0);
}

.grid-alpha {
  display: none;
  position: absolute;
  background-color: #F4F3F4;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
}

.grid-alpha:hover {
  cursor: zoom-out;
}

.grid-item.item-opened {
  width: 80%;
  height: 80vw;
  border: 3px solid #e8e8e8;
  -webkit-filter: grayscale(0%) blur(0);
}

.grid-item--width2 {
  width: 50%;
}

.grid-item--height2 {
  height: 400px;
}

.grid-item--height3 {
  height: 600px;
}

@media only screen and (max-width: 580px) {
  .grid-item {
    width: 50%;
  }

  .grid-item--width2 {
    width: 100%;
  }
}
.grid-item:nth-child(1) {
  background-image: url("images/1.jpg");
}

.grid-item:nth-child(2) {
  background-image: url("images/2.jpg");
}

.grid-item:nth-child(3) {
  background-image: url("images/3.jpg");
}

.grid-item:nth-child(4) {
  background-image: url("images/4.jpg");
}

.grid-item:nth-child(5) {
  background-image: url("images/5.jpg");
}

.grid-item:nth-child(6) {
  background-image: url("images/6.jpg");
}

.grid-item:nth-child(7) {
  background-image: url("images/7.jpg");
}

.grid-item:nth-child(8) {
  background-image: url("images/8.jpg");
}

.grid-item:nth-child(9) {
  background-image: url("images/9.jpg");
}

.grid-item:nth-child(10) {
  background-image: url("images/10.jpg");
}

.grid-item:nth-child(11) {
  background-image: url("images/11.jpg");
}

.grid-item:nth-child(12) {
  background-image: url("images/12.jpg");
}

.grid-item:nth-child(13) {
  background-image: url("images/13.jpg");
}

.grid-item:nth-child(14) {
  background-image: url("images/14.jpg");
}

.grid-item:nth-child(15) {
  background-image: url("images/15.jpg");
}

.grid-item:nth-child(16) {
  background-image: url("images/16.jpg");
}

.grid-item:nth-child(17) {
  background-image: url("images/17.jpg");
}

.grid-item:nth-child(18) {
  background-image: url("images/18.jpg");
}

.grid-item:nth-child(19) {
  background-image: url("images/19.jpg");
}

.grid-item:nth-child(20) {
  background-image: url("images/20.jpg");
}

.grid-item:nth-child(21) {
  background-image: url("images/21.jpg");
}

.grid-item:nth-child(22) {
  background-image: url("images/22.jpg");
}

.grid-item:nth-child(23) {
  background-image: url("images/23.jpg");
}

.grid-item:nth-child(24) {
  background-image: url("images/24.jpg");
}

.grid-item:nth-child(25) {
  background-image: url("images/25.jpg");
}

.grid-item:nth-child(26) {
  background-image: url("images/26.jpg");
}

.grid-item:nth-child(27) {
  background-image: url("images/27.jpg");
}

.grid-item:nth-child(28) {
  background-image: url("images/28.jpeg");
}

.grid-item:nth-child(29) {
  background-image: url("images/29.jpeg");
}

.grid-item:nth-child(30) {
  background-image: url("images/30.jpeg");
}

.grid-item:nth-child(31) {
  background-image: url("images/31.jpeg");
}

.grid-item:nth-child(32) {
  background-image: url("images/32.jpeg");
}

.grid-item:nth-child(33) {
  background-image: url("images/33.jpeg");
}

.grid-item:nth-child(34) {
  background-image: url("images/34.jpeg");
}

.grid-item:nth-child(35) {
  background-image: url("images/35.jpeg");
}

.grid-item:nth-child(36) {
  background-image: url("images/36.jpeg");
}

.grid-item:nth-child(37) {
  background-image: url("images/37.jpg");
}

.grid-item:nth-child(38) {
  background-image: url("images/38.jpeg");
}

.grid-item:nth-child(39) {
  background-image: url("images/39.jpeg");
}

.grid-item:nth-child(40) {
  background-image: url("images/40.jpeg");
}

.grid-item:nth-child(41) {
  background-image: url("images/41.jpeg");
}
.grid-item:nth-child(42) {
  background-image: url("images/42.jpeg");
}.grid-item:nth-child(43) {
  background-image: url("images/43.jpeg");
}.grid-item:nth-child(44) {
  background-image: url("images/44.jpeg");
}.grid-item:nth-child(45) {
  background-image: url("images/45.jpeg");
}.grid-item:nth-child(46) {
  background-image: url("images/46.jpeg");
}.grid-item:nth-child(47) {
  background-image: url("images/47.jpeg");
}.grid-item:nth-child(48) {
  background-image: url("images/48.jpeg");
}.grid-item:nth-child(49) {
  background-image: url("images/49.jpeg");
}
.grid-item:nth-child(50) {
  background-image: url("images/50.jpg");
}
.grid-item:nth-child(51) {
  background-image: url("images/51.jpg");
}
.grid-item:nth-child(52) {
  background-image: url("images/52.jpg");
}
.grid-item:nth-child(53) {
  background-image: url("images/53.jpg");
}
.grid-item:nth-child(54) {
  background-image: url("images/54.jpg");
}
.grid-item:nth-child(55) {
  background-image: url("images/55.jpg");
}
.grid-item:nth-child(56) {
  background-image: url("images/56.jpg");
}
.grid-item:nth-child(57) {
  background-image: url("images/57.jpg");
}
.grid-item:nth-child(58) {
  background-image: url("images/58.jpg");
}
.grid-item:nth-child(59) {
  background-image: url("images/59.jpg");
}
.grid-item:nth-child(60) {
  background-image: url("images/60.jpg");
}
.grid-item:nth-child(61) {
  background-image: url("images/61.jpg");
}