CSS Grid Child Image overflowing

Grid with 3 column Layout containing Title and image, but grid height is limited using grid-auto-rows.

<div class=”app-list suggestions”>
<article>
<div class=”title”>A App</div>
<img src=”https://via.placeholder.com/150″ />
</article>
<article>
<div class=”title”>B App</div>
<img src=”https://via.placeholder.com/180″ />
</article>
<article>
<div class=”title”>C App </div>
<img src=”https://via.placeholder.com/120×220″ />
</article>
</div>

Css

.suggestions {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
display: grid;
grid-gap: 2.5em;
}

.suggestions > article {
padding: 1.5em;
border-radius: 12px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
background-color: white;
}

article {
display: grid;
grid-gap: 1em;
place-content: center;
place-items: center;
grid-template-rows: min-content 1fr;
}

img {
display:block;
width:100%;
max-width: 100%;
height: 100%;
object-fit: scale-down;
}

How to make sure image take available space, while maintaining the aspect ratio?