#grid {
  display: grid;
  grid-template-rows: repeat(7, 50px);
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 0;
  margin: 0;
}
#grid > div {
  color: white;
  font-size: 4vw;
  padding: 1px;
  background: transparent;
}
#grid > div img { width: 100%; height: 100%; transition: .8s; }
#grid:hover > div img { opacity: 0.7; filter: grayscale(100%); }
#grid:hover > div img:hover { opacity: 1; filter: grayscale(0%); } 
#grid > div:nth-child(1) {
  grid-row: span 3;
}
#grid > div:nth-child(2) {
  grid-row: span 3;
}
#grid > div:nth-child(3) {
  grid-row: span 4;
  grid-column: span 2;
}
#grid > div:nth-child(4) {
  grid-row: span 3;
  grid-column: span 2;
}
#grid > div:nth-child(5) {
  grid-row: span 4;
  grid-column: span 2;
}
#grid > div:nth-child(6) {
  grid-row: span 4;
  grid-column: span 2;
}
#grid > div:nth-child(7) {
  grid-row: span 4;
}
#grid > div:nth-child(8) {
  grid-row: span 4;
}
#grid > div:nth-child(9) {
  grid-row: span 3;
  grid-column: span 2;
}
#grid > div:nth-child(10) {
  grid-row: span 3;
  grid-column: span 2;
}
.dr {
  border: 1px solid #ccc;
  border-radius: 10px;
    text-align: center;
    box-shadow: 2px 5px 10px 1px #eee;
}