CSS weird spacing behavior when cropping images - html

Question

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 350x350 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

Answer 1

As per Максим Мовчан's answer
try this
.card {
margin-bottom: -40%;
}

Answer 2

Set height to max-content for your a tag.
CSS:
a {
height: max-content;
}