Как прокручивать модальное содержимое, перекрывая изображение?

Question

На самом деле у меня есть следующее модальное окно, которое показывает изображение продукта слева и его описание справа в настольной версии, а на мобильном устройстве я показываю полноэкранный модальный экран с изображением вверху и описанием под изображением.

#modalProduct{
	padding-left: 0;
}

.img-fluid {
  height: 250px;
  object-fit: cover;
}

.modal-content {
  border: none;
}

.product-description {
  height: 430px;
  padding: 20px 20px 10px;
}

@media only screen and (max-width: 576px) {
    .img-product {
      border-radius: 0 !important;
      position: initial !important;
      height: 350px !important;
    }

    .modal-dialog {
      margin: 0;
    }

    .modal-content {
      border-radius: 0;
    }

    .product-description {
      height: auto;
    }
 }

.img-product {
  border-top-left-radius: .3rem;
  border-bottom-left-radius: .3rem;
  position: absolute;
  height: 100%;
}

button.close {
  z-index: 999;
  position: absolute;
  right: 0;
  margin-right: 10px;
}

.close {
  opacity: 1;
  text-shadow: none;
  color: #f00;
  font-size: 2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<button class="btn btn-danger" data-toggle="modal" data-target="#modalProduct">Modal</button>  
	
	<!-- Modal: Product -->
  <div class="modal fade" id="modalProduct" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="row">
          <div class="col-xs-12 col-sm-5 col-md-5">
            <img class="img-fluid img-product" src="https://cdn.semrush.com/blog/static/media/b2/b6/b2b611aaa91a017a1bfacfbd8b04896a/resize/885x-/a-b-test-1000x571.png">
          </div>
          <div class="col-xs-12 col-sm-7 col-md-7">
            <div class="product-description">
              <h3>TEST</h3>
              <p>TEST TEST TEST TEST TEST</p>
              <table class="table table-sm table-borderless table-striped">
                <thead>
                  <tr>
                    <th scope="col">TEST</th>
                    <th scope="col">TEST</th>
                    <th scope="col">TEST</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                  <tr>
                    <td>TEST</td>
                    <td>TEST</td>
                    <td>TEST</td>
                  </tr>
                </tbody>
              </table>
              <div class="float-left">
              <button type="button" class="btn btn-link text-danger" data-dismiss="modal" aria-label="Close">Close</button>
              </div>
              <h2 class="text-right text-success">TEST</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Мне было интересно, можно ли прокручивать в мобильной версии контент, например, с эффектом «параллакса», перекрывая изображение (не полностью) и прокручивая только внутреннее content

Примерно так: