CSS weird spacing behavior when cropping images – Reactjs

The images I’m working with are 350 x 525 px, but the top and bottom 90ish pixels of the image are transparent, which makes the actual content roughly 350 x 350 px in the center of the png. I want to show the 350×350 content with rounded corners, so I have the following CSS which does the trick:

img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: 2rem;
}

The code basically removes the top and bottom bezels and gets me a 1:1 aspect ratio image with rounded corners. The problem now is that the <div> housing this image stays the same height, so when I arrange these images in a grid, I get a lot of empty space that I don’t know how to fix.

I am working with React and styled-components, but this is the equivalent HTML and CSS:

This is the main grid container.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
}

And each element in the grid is called a card. Here’s how each card is defined.

<div class="card">
  <a href="#">
    <img src="image-path" alt="" />
    <h4>some text</h4>
  </a>
</div>

img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: 2rem;
}

a {
  text-decoration: none;
}

h4 {
  text-align: center;
  padding: 1rem;
}

I’ve attached a few images of the issue. How do I fix this?

image 1

image 2