.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 2px; /* Medzera medzi obrázkami */
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.gallery img {
  height: 300px; /* Pevná výška obrázkov */
  object-fit: cover;
  cursor: pointer;
}

/* Nastavenia pre rôzne šírky */
.gallery img.x-small {
  flex: 1 1 10%; /* Extra malá šírka */
  max-width: 15%; /* Pre obmedzenie šírky */
}

.gallery img.small {
  flex: 1 1 20%; /* Malá šírka */
  max-width: 25%;
}

.gallery img.medium {
  flex: 1 1 30%; /* Stredná šírka */
  max-width: 35%;
}

.gallery img.large {
  flex: 1 1 40%; /* Veľká šírka */
  max-width: 50%;
}

/* Na mobilných zariadeniach sa obrázky zobrazia vertikálne */
@media (max-width: 768px) {
  .gallery img {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

    /* Popup okno */
    .popup {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Obrázok v popup */
    .popup img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
    }

    /* Zatváracie tlačidlo */
    .popup .close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      color: white;
      cursor: pointer;
    }

    /* Šípky pre navigáciu */
    .popup .arrow {
      position: absolute;
      top: 50%;
      font-size: 36px;
      color: white;
      cursor: pointer;
      transform: translateY(-50%);
      user-select: none;
    }
    .popup .arrow.left {
      left: 20px;
    }
    .popup .arrow.right {
      right: 20px;
    }