Blog grid - phone view spacing

On this blog page:
https://www.garudiostudiage.com/news

in mobile view, I have used this code to make the posts display in 2 columns:

@media only screen and (max-width: 767px) {
  .blog-basic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 14px;
  }

  .blog-basic-grid--container img {
    width: 100% !important;
    height: auto !important;
  }
}

It works, except the gaps between the posts are huge (as per the screen shot) and I can't find a way of adjusting these?

Any help would be very gratefully received.  Thank you!

Thank you so much, that's great!

@tuanphan what if we're trying to minimize the space between the title and the image? Trying to make it more apparent which post the title goes with.

https://www.playroominspo.com/gift-guides

21 minutes ago, ThisWayToFabulous said:

@tuanphan what if we're trying to minimize the space between the title and the image? Trying to make it more apparent which post the title goes with.

https://www.playroominspo.com/gift-guides

Use this CSS code

@media screen and (max-width:767px) {
.blog-article-spacer {
    height: 1px !important;
}
}