How to keep the thumbnail image aspect ratio?

[LIYAShop]

https://0db1d3-5b.myshopify.com/products/test

The thumbnails for this product are portrait aspect ratio, Shopify renders them as squares. I was able to make it show the whole image within that square, without cropping.

How do I change the aspect ratio to make the whole area of the image portrait as well, so that it doesn't have those white stripes on the sides and keep a 10-20px distance between the items?

[LIYAShop · Accepted solution]

Found a solution by adding this code to base.css

.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 140% !important;
}

As a bonus, I also found a way to align thumbs in the center, because in my case there will mostly be 3 items or less and left alignment just wasn't appropriate.

.thumbnail-list {
  grid-template-columns: repeat(5, 1fr) !important;
  margin: 0px auto;
  justify-content: center;
}