.gallery {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.normal {
  grid-column: span 6;
  grid-row: span 3;
}

.bigger {
  grid-column: span 6;
  grid-row: span 4;
}

.vertical {
  grid-column: span 6;
  grid-row: span 5;
}

@media (max-width: 4000px) and (min-width : 1200px) {

.gallery {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}

.normal {
  grid-column: span 7;
  grid-row: span 4;
}

.bigger {
  grid-column: span 7;
  grid-row: span 5;
}

.vertical {
  grid-column: span 7;
  grid-row: span 6;
}

}