Having an issue with border-radius and overflow: hidden together, causing a strange problem as shown in the picture.
The image doesn't extend to the edge of the div at the bottom right, leaving a visible curve. Any assistance would be greatly appreciated.
See live version here for reference:
.content__card {
position: relative;
margin: 1em 0;
width: 80em;
max-width: 80%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
border: none;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
height: auto;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7D44FD;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Follow our</h2>
<h2>Youtube channel!</h2>
<a href="#">Youtube</a>
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>