.modal-image {
  padding: 0;
  height: 100%;
  overflow-y: auto;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}



/* Additional CSS for responsive image handling */
.modal-image img {
  object-fit: contain; /* Ensure the image fits within its container */
}

@media (orientation: landscape) {
  .modal-image img {
      height: auto; /* Allow the image to expand to fill the modal width */
      max-width: 100%;
  }
}

@media (orientation: portrait) {
  .modal-image img {
      width: auto; /* Allow the image to expand to fill the modal height */
      max-height: 100%;
  }
}

/* .modal-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
} */

/* .modal-content {
  width: 700px;
}
.modal-body {
  padding: 0;
}
  */
/*.modal-backdrop {
  position: fixed;
  width: 100% !important;
  height: 100% !important;
}

.trunkshow_story_fontsize {
  font-size: 26px;
}


@media (max-width: 375px) {
  .trunkshow_story_fontsize {
    font-size: 14px;
  }
}

@media (min-width: 376px) and (max-width: 767.98px) {

  .trunkshow_story_fontsize {
    font-size: 16px;
  }

}

@media (min-width: 768px) and (max-width: 991.98px) {
  .trunkshow_story_fontsize {
    font-size: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {}

@media (min-width: 1200px) {}*/

/* For iPads (adjust breakpoints as needed) */
/* @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .modal {
        width: 100%;
        font-size: 10px; 
    }
} */

/* For iPhone */
/* @media only screen and (max-width: 768px) { 
    .modal {
      width: 1000px;
      font-size: 10px; 
    }
} */