Circular picture same width and height auto scaling the images - html

Question

I'm trying to create a card like structure where I want to display and image and some text.
This is my result:
I like most of the result, it just bothers me that not all images have this 5rem x 5rem size.
How can I solve this?
It would appear that the width / height of the .card-img-holder does not always fit 5x5.
.card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
padding: .5rem;
margin: .5rem;
flex: 1 1 0px;
}
.card-img-holder {
width: 5rem;
height: 5rem;
}
.card-img {
width: 100%;
height: 100%;
object-fit: contain;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 50%;
}
.card-img-name {
padding: .5rem;
}
.card-img-name p:first-of-type {
font-size: 1rem;
font-weight: bold;
}
<!-- Jest -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/335/150" alt="Jest" class="card-img" />
</div>
<div class="card-img-name">
<p>Jest</p>
<p>Testing</p>
</div>
</div>
<div>
Website
</div>
</div>
<!-- React -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/350" alt="React" class="card-img" />
</div>
<div class="card-img-name">
<p>React</p>
<p>Frontend Library</p>
</div>
</div>
<div>
Website
</div>
</div>
<!-- Git -->
<div class="card">
<div class="flex-container centered">
<div class="card-img-holder">
<img src="https://picsum.photos/63/150" alt="Git" class="card-img" />
</div>
<div class="card-img-name">
<p>Git</p>
<p>Version Control</p>
</div>
</div>
<div>
Website
</div>
</div>