Merhaba bir card tasarımı yapmaya çalışıyorum ve sponsorumun ismi uzun oldukça karttaki resimde kayma oluyor isim uzunsa ... olarak göstermesini denediğimde bu sorun çözüldü ama bu seferde sponsorun kim veya ne iş yaptığı anlaşılmıyor sponsor resmi ve ismi kartın orta hizasında sabit kalabilir mi yardımcı olur musunuz ?

<?php
include 'header.php';
?>
<link rel="stylesheet" type="text/css" href="vendor/datatables/dataTables.bootstrap4.min.css">
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row justify-content-center">
<?php
$SponsorBilgisi = $db->query("SELECT Sponsor_Ad, Sponsor_Logo, Sponsor_Adress, Sponsor_Telefon, Sponsor_Kimlik FROM Sponsor ORDER BY Sponsor_Kimlik");
while ($Cek = $SponsorBilgisi->fetch()) :
?>
<div class="col-xl-2 col-md-4 mb-4">
<div class="card border-left shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center justify-content-center">
<div class="col-auto text-center">
<div class="text-xs font-weight-bold text-uppercase mb-1">
<div class="profile-image"></div>
<h3 class="profile-name"><?= $Cek["Sponsor_Ad"] ?></h3>
<div style="border-top: 1px solid #ccc; width: 100%; margin: 10px 0;"></div>
</div>
<!-- Add other content as needed -->
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<style>
.card {
top: 15px;
}
.profile-card {
width: 300px;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: white;
border-radius: 1rem;
}
.profile-image {
position: relative;
top: -40px;
border-radius: 1rem;
background-image: url(https://pps.whatsapp.net/v/t61.24694-24/362949929_609312817939812_3292089068504738002_n.jpg?ccb=11-4&oh=01_AdSsA5ues5o682CzaG6GSbBS9B1RiRb3ydqFyp0fbBGcUA&oe=64F8056B&_nc_cat=111);
width: 11rem;
height: 11rem;
background-position: center;
background-size: cover;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.4);
}
.profile-info {
text-align: center;
margin-top: -3rem;
margin-bottom: 1rem;
}
.profile-name {
font-size: 1rem;
color: #212121;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-info > .profile-desc {
color: #666666;
font-size: 0.9rem;
}
/* ... Other styles ... */
</style>