.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.item:nth-of-type(3n+4) {
  grid-row-end: span 2;
}

.item:nth-of-type(8n+4) {
  grid-column: 3;
}

.item:nth-of-type(8n+5) {
  grid-column: 4;
}

@media only screen and (max-width: 1200px) {
  .masonry {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (max-width: 992px) {
  .masonry {
    grid-template-columns: repeat(3, 1fr);
  }
  .item:nth-of-type(3n+4) {
    grid-row-end: span 1;
  }

  .item:nth-of-type(6n+4) {
    grid-column: span 1;
  }

  .item:nth-of-type(6n+5) {
    grid-column: span 1;
  }
}

@media only screen and (max-width: 576px) {
  .masonry {
    grid-template-columns: 1fr;
  }
}