White corners after border-radius - html

Question

I want to create a card (that is an image and an overlay). The card should be with border-radius. Unfortunately, when I add it in conjunction with overflow-y: hidden, it creates some white pixels on the corners.
I have the following HTML structure and CSS code:
.container {
max-width: 80rem;
padding: 1em;
margin-inline: auto;
}
.works__column {
display: flex;
flex-direction: column;
gap: 2rem;
}
.size {
--size: 0;
width: var(--size);
height: var(--size);
}
.work {
display: grid;
overflow-y: hidden;
border-radius: .5rem;
}
.work__preview,
.work__overlay {
grid-area: 1 / 2;
}
.work__preview img {
--size: 100%;
object-fit: cover;
aspect-ratio: 2 / 1.4;
}
.work__overlay {
align-self: end;
padding-right: 1rem;
display: flex;
gap: 2rem;
justify-content: space-between;
}
.work__title {
font-weight: 600;
line-height: 1.6;
color: var(--white);
padding: .5rem 1rem;
border-start-end-radius: .5rem;
background-color: var(--steel-gray);
}
.work__icon {
flex-shrink: 0;
align-self: center;
margin-bottom: .125rem;
}
<section class="works">
<div class="container">
<div class="works__column">
<div class="works__work work">
<div class="work__preview">
<img class="size" alt="Sports Elements" src="images/works/1.jpg" />
</div>
<div class="work__overlay">
<h3 class="work__title">
Portier - The ultimate templates & components library.
</h3>
<div class="work__icon icon">0</div>
</div>
</div>
<div class="works__work work">
<div class="work__preview">
<img class="size" alt="The Coporate" src="images/works/2.jpg" />
</div>
<div class="work__overlay">
<h3 class="work__title">
The Coporate - Card for Indian Startups
</h3>
<div class="work__icon icon">1</div>
</div>
</div>
<div class="works__work work">
<div class="work__preview">
<img class="size" alt="App Interface" src="images/works/3.jpg" />
</div>
<div class="work__overlay">
<h3 class="work__title">
Components Web App Interface
</h3>
<div class="work__icon icon">2</div>
</div>
</div>
</div>
</div>
</section>
You can see the problem in these images:
However, the last card works as expected. I don't know the reason.
I think the problem is that I applied aspect-ratio with height: 100% on work__preview img. This is required because the parent has a greater hight and the overlay starts to hang from the image.