.hex-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hex-row {
      display: flex;
      gap: var(--gap);
      margin-bottom: calc(var(--hex-h) / 2);
      margin-bottom: -18px !important;
    }


    .hex {
      width: var(--hex-w);
      height: var(--hex-h);
      background: #ccc;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s;
    }

    .hex img {
      width: 50px;
      object-fit: contain;
      display: block;
    }

    .hex:hover {
      transform: scale(1.05);
    }

    /* Lightbox */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .lightbox.is-open { display: flex; }

    .lightbox img {
      max-width: 90%;
      max-height: 85%;
      border-radius: 8px;
    }

    .lightbox .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 36px;
      color: #fff;
      cursor: pointer;
    }

        :root {
      --hex-w: 140px; /* width of hex */
      --hex-h: calc(var(--hex-w) * 0.866); /* height based on hex ratio (√3/2) */
      --gap: 8px;
    }

    .lightbox .prev,
.lightbox .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  font-size: 50px;
  padding: 10px;
  color: #fff;
  user-select: none;
  transform: translateY(-50%);
  z-index: 1100;
}

.lightbox .prev { left: 20px; text-decoration: none;}
.lightbox .next { right: 20px; text-decoration: none; }

.lightbox .prev:hover,
.lightbox .next:hover { color: #aaa; }


.hex img{width:190px;object-fit: fill;height:120px;}