body {
  background-color: #000;
}

.grid-gallery {
  margin-block: 40px;
  border-radius: 25px;
  overflow: hidden;
  max-width: max-content;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 150px);
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.gallery-items {
  display: grid;
  grid-template-rows: subgrid;
  overflow: hidden;
}

.gallery-items:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 3;
}

.gallery-items:nth-child(6) {
  grid-column: 2 / 4;
}

.gallery-items:nth-child(6),
.gallery-items:nth-child(9) {
  grid-row: 1 / 2;
}

.gallery-items:nth-child(8) {
  grid-row: 2 / 2;
}

.gallery-items:nth-child(11) {
  grid-column: 1 / 3;
  grid-row: 5;
}

.gallery-items:nth-child(12) {
  grid-row: 4;
}

.gallery-items:nth-child(13) {
  grid-row: 2;
}

.gallery-items:nth-child(15) {
  grid-row: 3;
}

.gallery-items:nth-child(17) {
  grid-row: 5;
}

.gallery-items .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: 0.5s ease-in;
}

.img-cover:is(:hover, :focus-visible) {
  transform: scale(1.05);
  filter: grayscale(0);
}