@charset "UTF-8";




  .gallery {
      column-count: 3;
      column-gap: 16px;
    }

    .gallery img {
      width: 100%;
      margin-bottom: 16px;
      display: block;
      cursor: pointer;
      break-inside: avoid;

      opacity: 0;
      transform: translateY(20px);
      animation: fadeIn 0.6s ease forwards;
    }

    /* Responsive */

    @media (max-width: 600px) {
      .gallery { column-count: 2; }
    }

    @media (max-width: 400px) {
      .gallery { column-count: 1; }
    }

    .gallery img:nth-child(2) { animation-delay: 0.1s; }
    .gallery img:nth-child(3) { animation-delay: 0.2s; }
    .gallery img:nth-child(4) { animation-delay: 0.3s; }
    .gallery img:nth-child(5) { animation-delay: 0.4s; }
    .gallery img:nth-child(6) { animation-delay: 0.5s; }

    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


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

    .lightbox.active {
      display: flex;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 85vh;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      animation: zoomIn 0.25s ease;
    }




.gallery-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: #999999;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  padding: 20px;
  z-index: 1001;
}

.gallery-prev {
  left: 20px;
}

.gallery-next {
  right: 20px;
}

.gallery-nav:hover {
  opacity: 0.7;
}









    @keyframes zoomIn {
      from {
        transform: scale(0.85);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .close {
      position: fixed;
      top: 24px;
      right: 32px;
      color: white;
      font-size: 42px;
      cursor: pointer;
      user-select: none;
    }