.page-body {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  grid-gap: 15px;
  background-color: #fff;
}

.block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: bold;
  border-radius: 6px;
  -webkit-box-shadow: 
    inset 2px 2px 4px #000,
    0 0 0 #000;
          box-shadow: 
    inset 2px 2px 4px #000,
    0 0 0 #000;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-shadow: 0 -50px 0 #fff;
}

.block:hover {
    -webkit-box-shadow: 
    inset -2px -2px 4px #000,
    2px 3px 4px 0 #000;
            box-shadow: 
    inset -2px -2px 4px #000,
    2px 3px 4px 0 #000;
}

.block:nth-child(5n) {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.block:nth-child(2n) {
  -ms-grid-row-span: 2;
  grid-row: span 2;
}