.hex-cluster {
  position: relative;
  /* width: 500px; */
  height: 400px;
  overflow: visible;
}

.hex-wrap {
  position: absolute;
  width: 120px;
  height: 104px;
  transform: rotate(0deg);
}

.hex {
  width: 120px;
  height: 104px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: transform 0.2s;
  cursor: pointer;
}

.hex-border {
  width: 125px; /* slightly larger than .hex */
  height: 108px; /* slightly larger than .hex */
  background: #d4d5d6; /* border color */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.hex:hover {
  /* transform: scale(1.5); */
  z-index: 2;
}

.hex-border:hover {
  transform: scale(1.3);
  z-index: 2;
}

.hex img {
  object-fit: cover;
  display: block;
}