.hexGallery {
  /* Výchozí velikost pro počítače */
  --s: min(200px, 15vw);
  /* Vzdálenost okolních hexagonů */
  --d: calc(var(--s) * 1.2);
  /* Velikost písma závislá na velikosti hexagonu */
  --font-size: calc(var(--s) * 0.1);
  position: relative;
  width: 100%;
  height: calc(var(--s) * 3);
  margin: auto;
  /* Odstraní modrý problik na mobilech při dotyku */
  -webkit-tap-highlight-color: transparent;
}

/* --- Responzivní zvětšení pro tablety a mobily --- */
@media (max-width: 768px) {
  .hexGallery {
    --s: min(150px, 25vw);
    /* Větší podíl z šířky obrazovky pro tablety */
  }
}

@media (max-width: 480px) {
  .hexGallery {
    --s: min(120px, 32vw);
    /* Ještě větší podíl pro úzké mobily */
  }
}

/* ------------------------------------------------- */

.hexGallery .hex .back {
  font-size: var(--font-size);
  padding: 10px;
  text-align: center;
}

.hexGallery .hex {
  position: absolute;
  width: var(--s);
  aspect-ratio: 0.866;
  cursor: pointer;
  perspective: 1000px;
}

.hexGallery .hex .hexInner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s, opacity 0.5s;
  transform-origin: center;
  opacity: 1;
}

/* Otáčení hexagonu: reaguje na najetí myši (PC) i na kliknutí/dotyk (Mobil + JS) */
.hexGallery .hex:hover .hexInner,
.hexGallery .hex.touch-flip .hexInner {
  transform: rotateY(180deg);
  opacity: 1;
}

.hexGallery .hex .front,
.hexGallery .hex .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0);
}

.hexGallery .hex .front {
  background-size: cover;
  background-position: center;
}

.hexGallery .hex .back {
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotateY(180deg);
  /* Zabráníme tomu, aby pozadí zadní strany blokovalo kliknutí na dotykových zařízeních */
  pointer-events: none;
}

/* Oprava klikatelnosti odkazů a tlačítek v hexagonu */
.hexGallery .hex .back a {
  pointer-events: auto;
  /* Odkaz musí přijímat kliknutí */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  /* Nebo vaše primární barva pro odkazy */
}

/* Centrální hexagon */
.hexGallery .hex:nth-child(1) {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Okolní hexagony */
.hexGallery .hex:nth-child(2) {
  left: calc(50% + var(--d));
  top: 50%;
  transform: translate(-50%, -50%);
}

.hexGallery .hex:nth-child(3) {
  left: calc(50% + calc(var(--d) * 0.5));
  top: calc(50% - calc(var(--d) * 0.866));
  transform: translate(-50%, -50%);
}

.hexGallery .hex:nth-child(4) {
  left: calc(50% - calc(var(--d) * 0.5));
  top: calc(50% - calc(var(--d) * 0.866));
  transform: translate(-50%, -50%);
}

.hexGallery .hex:nth-child(5) {
  left: calc(50% - var(--d));
  top: 50%;
  transform: translate(-50%, -50%);
}

.hexGallery .hex:nth-child(6) {
  left: calc(50% - calc(var(--d) * 0.5));
  top: calc(50% + calc(var(--d) * 0.866));
  transform: translate(-50%, -50%);
}

.hexGallery .hex:nth-child(7) {
  left: calc(50% + calc(var(--d) * 0.5));
  top: calc(50% + calc(var(--d) * 0.866));
  transform: translate(-50%, -50%);
}