.modal-content {
  width: 100%;
  max-width: unset !important;
}

/* 1. Ensure the container wrapper treats absolute elements correctly */
.lightbox-carousel .carousel-inner {
    position: relative;
}

/* 2. Superimpose the caption over the active image */
.lightbox-carousel .carousel-item .lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    
    /* 3. Style overlay for contrast readability */
    background: rgba(0, 0, 0, 0.35); /* Semi-transparent black background */
    color: #ffffff;                  /* White text color */
    padding: 12px 20px !important;   /* Comfortable spatial padding */
    margin: 0 !important;            /* Eliminate default spacing alignment */
}

/* Optional: Smooth out caption behavior if images vary wildly in height */
.lightbox-carousel .carousel-item {
    position: relative;
}

/* Set up for zooming in on images */
.carousel-item.active img {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.ratio {
  overflow: hidden;
}

.zoomed {
  transform: scale(2); /* Zooms the image to twice its size */
  cursor: zoom-out !important;
}