.gallery > div {
  position: relative;
}
.gallery > div::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.grid {
  display: flex;
  flex-direction: column;
}
.row {
  flex: 1 1 0;
  align-items: stretch !important;
  margin-bottom: 15px;
}
.row:last-child {
  margin-bottom: 0;
}
.cell {
  margin-right: 15px;
  height: auto !important;
}
.cell:last-child {
  margin-right: 0;
}
.empty {
  opacity: 0.6;
}
.close {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background: url(../img/galleryNav/close.png) center center no-repeat;
  background-size: 30px 30px;
}
.left, .right {
  width: 30px;
  height: 50px;
  background: center center no-repeat;
  background-size: 30px 50px;
  margin-top: -25px;
}

.left {
  right: 100%;
  left: auto !important;
  margin-right: 15px;
  background: url(../img/galleryNav/leftArrow.png);
}
.right {
  left: 100%;
  right: auto !important;
  margin-left: 15px;
  background: url(../img/galleryNav/rightArrow.png);
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

	.left {
	  background: url(../img/galleryNav/leftArrow@2x.png) center center no-repeat;
	}
	.right {
	  background: url(../img/galleryNav/rightArrow@2x.png)center center no-repeat;
	}
	.left, .right {
	  background-size: 30px 50px;
	}
	.close {
	  background: url(../img/galleryNav/close@2x.png) center center no-repeat;
	  background-size: 30px 30px;
	}
}