.image-gallery a {
    display: inline-block;
    margin: 0.3rem;
    border: 1px solid #ccc;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
  }

  .image-gallery img {
    height: 10em;
    width: auto;
    object-fit: cover; 
  }

  .lightboxOverlay {
    /*background-image: url('{{ url_for('static', filename='img/gallery_bg.jpg') }}');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8 !important; 
  }


  .lightbox,
  .lb-dataContainer {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .lb-caption,
  .lb-number,
  .lb-close:hover {
    color: white;
  }

  .lightbox .lb-image {
    height: 80vh !important; 
    width: auto !important;
    max-width: 90vw !important; 
    object-fit: contain; 
  }


  .lb-outerContainer {
    max-width: 90vw !important; 
    height: auto !important; 
  }

  @media (max-width: 768px) {
    .lightbox .lb-image {
      height: 70vh !important; 
      max-width: 95vw !important; 
    }

    .lb-outerContainer,
    .lb-dataContainer { 
      max-width: 95vw !important;
    }
  }