Masonry layout shadow get clipping

I am creating a masonry layout with shadow. But unfortunately, the shadow gets clipped as the following snippet. I know that put some bottom padding will fix this, but the content of this card can be change time to time then the height will change according to the content. So the problem here needed a pure CSS method to get rid of bottom clipping in any height and content size.

Thanks

.masonry-cascading-grid-layout {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    
    padding-bottom: 120px; 
    
    .masonry-wrap{
      padding-bottom: 120px; 
    }
  }

  .item-masonry {
    display: inline-block;
    padding: 0em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    box-shadow: 0px 30px 60px -30px #757287, 0px 10px 100px -20px rgba(0,0,0,.25);//shadow
    
    border-radius: 5px;
  }

    .masonry-cascading-grid-layout {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }

<div class="masonry-cascading-grid-layout">
      <div class="masonry-wrap">
                          <div class="item-masonry">
            <h3 class="title">Item 1</h3>
            <div class="content"><p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 2</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 3</h3>
            <div class="content"><p>No</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 4</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p></div>
          </div>
                  <div class="item-masonry">
            <h3 class="title">Item 5</h3>
            <div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
          </div>
              </div>
    </div>

Solution

So, I decided to do this again with myself. I cannot accept Imran answer because it is tricky but not a good code practice. (Thanks for your support Imran, But I start from scratch to build this again.) I found a good article (https://tobiasahlin.com/blog/masonry-with-css/) written by Tobias Ahlin Bjerrome and it gives the knowledge all I need. Change display: inline-block; to flex and remove the outer wrapper was fix the issue. Now it looks cleaner and less😉

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 1000px;
  counter-reset: items;
  padding-top: 50px;
}

.item {
  width: 49%;
  margin-bottom: 2%;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 30px 60px -30px #757287,
    0px 10px 100px -20px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
  .item {
    width: 100%;
  }
  .container {
    display: block;
    height: 100%;
  }
}

<div class="container">
  <div class="item">
     <h3 class="title">Item 1</h3>
    <div class="content">
      <p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 2</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 3</h3>
    <div class="content">
      <p>No</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 4</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p>
    </div>
  </div>
  <div class="item">
     <h3 class="title">Item 5</h3>
    <div class="content">
      <p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
    </div>
  </div>
</div>