（画像あり）高さの違うアイテムが詰まったレイアウトをflexboxで作るには？

画像のような、高さの違うアイテムが詰まったレイアウトを作りたいと思っています。

現在、下の画像のような表示になっています。全体がflexコンテナになっており、row方向 + wrapの折り返し、align-items: flex-start がかかっている状態です。

align-items: flex-start をかけたことで個々のアイテム自体の高さはバラバラにできたのですが、ここからさらにアイテム同士の縦を詰める方法がわかりません。具体的には左下のアイテムの上にある白い余白？を詰めたく、また今後高さの違うアイテムが増えた際にも対応できるようにしたいです。

HTML/CSSどちらをいじるのでもいいのですが、どのような変更を加えたらそのようなレイアウトが可能ですか？そもそもflexboxでそのようなレイアウトは可能なのでしょうか？

html
1<ul class="list">
2  <li class="item">
3    <div class="item-image"></div>
4    <h3 class="item-heading">heading</h3>
5    <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae, neque expedita fugit voluptatum iusto aperiam deserunt impedit, quod a dolorum minima obcaecati quam excepturi earum sint at dolor hic!</p>
6  </li>
7    <li class="item">
8    <div class="item-image item-image-large"></div>
9    <h3 class="item-heading">heading</h3>
10    <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae, neque expedita fugit voluptatum iusto aperiam deserunt impedit, quod a dolorum minima obcaecati quam excepturi earum sint at dolor hic!</p>
11  </li>
12  <li class="item">
13    <div class="item-image item-image-large"></div>
14    <h3 class="item-heading">heading</h3>
15    <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae, neque expedita fugit voluptatum iusto aperiam deserunt impedit, quod a dolorum minima obcaecati quam excepturi earum sint at dolor hic!</p>
16  </li>
17  <li class="item">
18    <div class="item-image"></div>
19    <h3 class="item-heading">heading</h3>
20    <p class="item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae, neque expedita fugit voluptatum iusto aperiam deserunt impedit, quod a dolorum minima obcaecati quam excepturi earum sint at dolor hic!</p>
21  </li>
22</ul>

CSS
1* { box-sizing: border-box; margin: 0; padding: 0; list-style: none; }
2
3.list {
4  display: flex;
5  flex-wrap: wrap;
6  align-items: flex-start;
7  justify-content: space-between;
8}
9
10.item {
11  width: calc((100% - 16px) / 2);
12  /* debug */
13  border: 1px solid rgba(0,0,0,.4);
14  background-color: rgba(0,0,0,.2);
15}
16
17.item-image {
18  padding-top: 30%;
19  /* debug */
20  border: 1px solid rgba(255,0,0,.4);
21  background-color: rgba(255,0,0,.1);
22}
23
24.item-image-large {
25  padding-top: 80%;
26}
27
28.item-heading {
29  font-size: 2em;
30}