.gallery-thumb {
  cursor: pointer;
}

.thumbnail-strip {
  max-height: 150px;
  overflow-y: auto;
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.thumbnail-item:hover {
  opacity: 1;
  border-color: #fff;
}

.thumbnail-item.active {
  opacity: 1;
  border-color: #0d6efd;
}

.carousel-inner img {
  max-height: 70vh;
  width: auto;
  margin: 0 auto;
}

.modal-xl {
  max-width: 90%;
}

#imageModal, #imageModal .modal-header, #imageModal .modal-body {
  background-color: #fff;
}

@media (min-width: 992px) {
  #imageCarousel .carousel-item {
    height: 80vh;
  }
}

@media (max-width: 991px) {
  #imageCarousel .carousel-item {
    min-height: 55vh;
  }
}

#imageCarousel .carousel-item img {
  max-height: 600px;
  max-width: 100%;
  object-fit: contain;
  margin: auto;
  height: 100%;
}

#imageCarousel p {
}

.row.gallery-container .gap-3 img {
  border: 1px solid #333;
}

@media (max-width: 768px) {
  #imageCarousel .carousel-item img {
    /*max-height: 400px;*/
    height: auto;
    min-height: auto;
  }
}

@media (max-width: 576px) {
  #imageCarousel .carousel-item img {
    /*max-height: 300px;*/
  }
}

/* Mobile modal fixes */

@media (max-width: 768px) {
  .modal-xl {
    max-width: 100%;
    margin: 0.5rem;
  }
}

@media (max-width: 768px) {
  #imageModal .modal-body {
    padding: 1rem 0.5rem;
  }
}

@media (max-width: 768px) {
  #imageModal .carousel-indicators {
    margin-top: 1rem !important;
  }
}

@media (max-width: 768px) {
  #imageModal .carousel-item p {
    font-size: 0.85rem;
    padding: 0.5rem;
    margin-top: 1rem !important;
  }
}

@media (max-width: 768px) {
  .carousel-indicators img {
    width: 60px !important;
    height: 60px !important;
  }
}

@media (max-width: 576px) {
  .modal-xl {
    margin: 0.25rem;
  }
}

@media (max-width: 576px) {
  .carousel-indicators img {
    width: 50px !important;
    height: 50px !important;
  }
}