body {
  background: #fff;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 40%;
}

.horizontal {
  flex: 1 1 170px;
  padding: 1px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(90%);
}

img:hover {
  filter: brightness(120%);
}

.leaveempty {
  width: 60%;
}

.preview {
  color: red;
  font-size: 2em;
  position: fixed;
  margin-top: 8px;
  margin-left: 8px;
  height: 95%;
  width: 56.5%;
  background-image: url("http://dl.dropboxusercontent.com/s/p2tiun8m7z60vci/tegejzery.jpg?dl=0");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mainflex {
  display: flex;
  position: absolute;
  top: 15px;
  right: 20px;
}

.vertical {
  flex: 1 1 100px;
  padding: 1px;
}