.hexagrid-container {
  --s: 150px; 
  --g: 10px;  
  display: grid;
  margin: calc(var(--s) + var(--g));
  justify-content: center;
}

.hexagrid-container .hexa-item {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  display: block;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1));
  cursor: pointer;
  transition: .3s ease-in-out;
  z-index: 0;
}

.hexagrid-container .hexa-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%);
  transition: .3s ease-in-out;
}

.hexagrid-container .hexa-item:hover {
  z-index: 10;
  --_t: 1.15;
}

.hexagrid-container .hexa-item:hover img {
  filter: grayscale(0);
}

/* موقعیت‌دهی دقیق بر اساس اندیس فرزندان */
.hexagrid-container .hexa-item:nth-child(1) { --_y: calc(-100% - var(--g)); }
.hexagrid-container .hexa-item:nth-child(7) { --_y: calc( 100% + var(--g)); }
.hexagrid-container .hexa-item:nth-child(3),
.hexagrid-container .hexa-item:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.hexagrid-container .hexa-item:nth-child(4),
.hexagrid-container .hexa-item:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.hexagrid-container .hexa-item:nth-child(3),
.hexagrid-container .hexa-item:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.hexagrid-container .hexa-item:nth-child(5), 
.hexagrid-container .hexa-item:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }