
.diamond-grid-gallery {
  align-items: center;
}

.diamond-grid-gallery .wrapper {
  position: relative;
  flex-grow: 1;
  margin: auto;
  max-width: 1200px;
  
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 2vmin;
  justify-items: center;
  align-items: center;
}

.diamond-grid-gallery img, .diamond-grid-gallery .grid {
  z-index: 1;
  grid-column: span 2;
  max-width: 100%;
  margin-bottom: -20%;
  clip-path: circle(70% at 50% 50%);
  transform: scale(0.8);
  transition: all .25s;
  max-width: 200px;
}

.diamond-grid-gallery .grid {
  min-width: 290px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* .diamond-grid-gallery img:nth-child(7n + 1), .diamond-grid-gallery .grid:nth-child(9n + 1) {
  grid-column: 2 / span 2;
} */

.diamond-grid-gallery img:nth-child(4n + 1), .diamond-grid-gallery .grid:nth-child(9n + 1) {
  grid-column: 1 / span 2;
}

.diamond-grid-gallery img:hover, .diamond-grid-gallery .grid:hover {
  z-index: 2;
  transform: scale(1.1);
}

@media screen and (max-width: 1200px) {
  .diamond-grid-gallery .wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(10, 1fr);
      grid-gap: 80px;
  }

  .diamond-grid-gallery img, .diamond-grid-gallery .grid{
    max-width: 150px;
  }
}