I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tried various solutions, but nothing seems to work.
https://i.sstatic.net/NWVHa.png
This is the HTML code:
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-img">
<img src="..." class="card-img-top img-fluid" alt="">
</div>
<div class="card-body">
<h4 class="card-title">Heroine's Quest: ...</h4>
<h5>Winner of 11 AGS Awards</h5>
<p class="card-text">Heroine's Quest is an adventure / RPG hybrid. Like in many adventure
games, you have a world to save, and must use your wit, guile and inven...</p>
</div>
<div class="card-footer">
<a href="game-details.php" class="btn btn-ags">Learn more <span class="d-none d-sm-inline">
<i class="fas fa-arrow-right"></i></span> </a>
</div>
</div>
</div>
</div>
This is the CSS code:
.card {
box-shadow: 0 0 30px rgba(68, 68, 68, 0.2);
transition: .3s;
background-color: #fff;
margin-top: 10px;
}
@media (min-width: 481px) {
.card:hover {
transform: scale(1.05);
transition: .3s;
}
}
.card .card-img {
position: relative;
overflow: hidden;
height: 200px;
}
.card .card-img img {
max-height: 199px;
width: 100%;
}
.card .card-img:after {
background: url(../img/home-game-highlights-shape.svg) no-repeat center bottom;
background-size: contain;
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 999;
}
.card .card-footer {
background-color: #fff;
border-top: none;
text-align: center;
}
This is the link to the .svg file used:
Here is the code in JSFiddle: https://jsfiddle.net/f2Lengk6/