.thumbnail img {
    width: 100%;
    height: auto;
    cursor: pointer;
  }
  /* Adjust image size */
  @media (min-width: 768px) {
    .thumbnail img {
      max-width: 100%;
      height: auto;
    }
  }
  /* For desktop: 4 images per row */
  @media (min-width: 992px) {
    .col-md-3 {
      flex: 0 0 25%;
      max-width: 25%;
    }
    .modal-dialog {
      max-width: 50%; /* Adjust the modal width as needed */
      max-height: calc(150vh - 250px); /* Adjust the modal height as needed */
    }
    .modal-content {
      height: 100%;
    }
    .modal-body {
      overflow-y: auto;
    }
    .modal-body img {
      max-width: 100%;
      height: auto;
    }
  }
  /* For tablets: 2 images per row */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-3 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .modal-dialog {
      max-width: 70%; /* Adjust the modal width as needed */
      max-height: 150px; /* Adjust the modal height as needed */
    }
    .modal-content {
      height: 100%;
    }
    .modal-body {
      overflow-y: auto;
    }
    .modal-body img {
      max-width: 100%;
      height: auto;
    }
  }
  /* For smartphones: 1 image per row */
  @media (max-width: 767.98px) {
    .col-md-3 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .modal-dialog {
      margin: 0;
      width: 80%;
      height: 100%;
      max-height: calc(100vh - 10px); /* Adjust for modal header */
    }
    .modal-content {
      height: 100%;
    }
    .modal-body {
      overflow-y: auto;
    }
    .modal-body img {
      max-width: 100%;
      height: auto;
    }
  }