.gallerygrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px;
        }

      .gallerygrid img {
        width: 100%;
        height: 200px;
        cursor: pointer;
        object-fit: cover;
      }

      #lightbox {
        position: fixed;
        z-index: 1000;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(
          0,
          0,
          0,
          0.8
        ); /* rgba= red, green, blue, alpha */
        display: none;
      }

      #lightbox.active {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .lightboxContainer {
        display: flex;
        justify-content: center;
        gap: 20px;
        max-width: 90vw;
        
        background-color: var(--main-bg-color);
        border: solid;
        border-color: var(--sec-color) ;
      }
      .imageBox {
        flex-shrink: 1 1 auto;
      }
      
      .imageBox img {
        max-width: 100%;
        max-height: 80vh;
        width: auto;
        height: auto;
        object-fit: contain;
      }
      .imageContent {
        flex: 0 0 20rem;
        max-width: 20rem;
        color:#fff;
        font-size:20px;
      }
      
      @media (max-width: 1024px) {
      .lightboxContainer {
       gap: 12px;
      }
      }