Image overlay doesn't fit - css

Question

I've a problem with image overlay.
Code is here: https://codepen.io/r-smal/pen/BOBdmX
<section class="team">
<h2 class="team__title">team</h2>
<div class="team__wrapper container__team ">
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
<div>
<div class="team__card ">
<div class="team__overlay"></div>
<img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
</div>
<h3 class="team__description">lorem</h3>
<p class="team__span">ipsum</p>
</div>
</section>
.container__team {
max-width: 1700px;
margin: 0 auto;
}
.team {
&__title {
margin: 100px;
text-align: center;
font-size: 30px;
text-transform: uppercase;
position: relative;
&::after{
content: "";
position: absolute;
width: 85px;
border-bottom: solid 3px #5dc6e8;
left: 48.5%;
top: 50px;
}
}
&__wrapper {
display: grid;
grid-template-columns: 33.33% auto auto;
text-align: center
}
&__description {
margin: 50px 0 20px;
text-align: center;
font-size: 35px;
}
&__span{
font-size: 35px;
text-align: center;
}
&__card {
position: relative;
}
&__overlay {
position: absolute;
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
display: none;
}
&__img{
}
}
.team__card:hover .team__overlay{
display: block;
transition: 0.3s;
}
As you can see on codepen overlay on top of image is bigger than my image and I can't figure out why. I made it 'fit" but I have to use static margins so in resoult in mobile version it doesn't look right.
And one last question how do I position ::after element center under my text that will stay here even in mobile?Without using static margin like in my code.