/* Make the modal-card scale with the screen width */
.modal-card {
    width: 90vw;         /* 90% of viewport width */
    max-width: 1200px;   /* optional maximum width for large screens */
}

/* Ensure modal content stretches */
.modal-card-body {
    width: 100%;
}

/* Make Owl Carousel fill the modal */
.owl-carousel {
    width: 100%;
}

/* Make images inside carousel responsive */
.owl-carousel .item img,
.project-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px); /* keeps image fully visible in modal */
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}