как сделать джамботрон отзывчивым

Question

У меня есть изображение внутри jumbotron, когда браузер достигает мобильной версии, jumbotron находится под изображением, и изображение уменьшается в размере, изображение должно быть отзывчивым, но я не могу уменьшить высоту jumbotron в мобильном представлении.

https://codepen.io/Abdelrahmanyassin/pen/MWaVwpq

<style type="text/css">
  .card {
    box-shadow: 20px 20px 50px 10px #888888;
  }

  .jumbotron {
    width: 100%;
    padding-top: 47rem;
    background-size: 100% ;
  }

  .jumbotronheader {
    background-image: url("C:/Users/abdul/OneDrive/Desktop/Moataz/Designs/Enterprize Innovation Audit Main Elements.png");
    background-repeat: no-repeat;
  }
</style>

<div class="jumbotron jumbotronheader " style=" width:100%; height: 54rem; ">
  <container>
    <h1 class=" jumbo display-auto"></h1>
    <p class=" jumbo lead"></p>
    <hr class="my-4">
    <p></p>

    <div class="dropdown">
      <div class="d-flex align-items-end">
        <button class="btn btn-primary dropbtn pull-right">Download</button>
      </div>
      <div class="dropdown-content">
        <a href="#">A0</a>
        <a href="#">A1</a>
        <a href="#">A2</a>
        <a href="#">A3</a>
        <a href="#">A4</a>
      </div>
    </div>
  </container>
</div>