body { margin: 0; font-family: sans-serif; }


    .grid { 
      width: 100%; 
      margin: 0 auto;
      margin-top: 80px; 
    }

    .grid-sizer, .grid-item { 
      width: 25%; 
    }

    .grid-item {
      width: 25%;
      padding: 5px;
      opacity: 0;
      border-radius: 6px;
      overflow: hidden;
      transform: scale(0.5);
      transition: all 0.5s ease;
      box-sizing: border-box;
    }

    .grid-item.show {
      opacity: 1;
      transform: scale(1);
    }

    .grid-item img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      object-fit: cover;
      transition: transform 0.5s ease;
      cursor: pointer;
      background-color: #ffffff00;
      transform: translateZ(0);
    }

    .grid-item img:hover {
      transform: scale(1.05);
    }
    .gallery-item img:hover {
      transform: scale(1.05);
    }

    
    @media (max-width: 1024px) {
      .grid-sizer, .grid-item { width: 33.33%; }
    }
    @media (max-width: 768px) {
      .grid-sizer, .grid-item { width: 50%; }
    }
    @media (max-width: 480px) {
      .grid-sizer, .grid-item { width: 100%; }
    }
    #lightbox {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      scroll-behavior: auto !important;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.93);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #lightbox img {
      max-width: 90vw;
      max-height: 80vh;
      border-radius: 2px;
    }
    #lightboxImage {
      pointer-events: none;
      user-select: none;
      position: relative;
      max-width: 90vw;
      max-height: 80vh;
      z-index: 10;
      pointer-events: none;
      transition: opacity 0.3s ease;
      opacity: 1;
    }

    #lightbox button {
      font-family: 'Manrope', sans-serif;
      padding: 10px 15px;
      font-size: 18px;
      color: #ff9100;
      border: none;
      outline: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0);
      transition: transform 0.25s ease;
    }
    
    #lightbox button:hover {
      transform: scale(1.4);
      color: #ffffff;
    }

    /* Контейнер всех кнопок в один ряд */
    .lightbox-controls {
      display: flex;
      align-items: center;
      gap: 30px; /* расстояние между Х и стрелками */
      margin-bottom: 15px;
    }

    /* Стрелки ближе друг к другу */
    .nav-buttons {
      display: flex;
      gap: 10px; /* расстояние между стрелками */
    }
    #lightboxImage.loading {
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }