/* Hexagon container */
.hexagon-container {
  position: relative;
  width: 100%;
  padding-top: 86.6%; /* Maintain aspect ratio for hexagon */
  background: transparent;
  display: inline-block;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.hexagon-container:hover {
  transform: scale(1.1); /* Zoom-in on hover */
}

/* Hexagon pseudo-elements */
.hexagon-container:before,
.hexagon-container:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: inherit;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Image inside hexagon */
.hexagon-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Ensure the image stays within the shape */
  transition: opacity 0.3s ease-in-out;
}

.hexagon-container:hover .hexagon-image {
  opacity: 0.85; /* Add dim effect */
}