Merhaba burdaki kartlarda alttaki gri yazılar kartın dışına taşıyor ve çok sık duruyorlar genişlettiğimdede iconların hizası kayıyor
mobil görünümde ise 2 kart arasında fazla boşluk var yardımcı olabilecek var mı ?

Kod

;

<?php 
include 'header.php';
?>
      
    <!-- Sayfa Başlangıç  -->
    <div class="content-page">
    <div class="container-fluid">
    <div class="row">
           
<!-- Toplam Üyeler -->
<div class="col-lg-3 mb-4">
    <div class="card card-stretch card-height shadow-sm border-0 rounded-4 custom-card-height">
        <div class="card-left-bar bg-primary rounded-start"></div>
        <div class="card-body p-3 d-flex flex-column justify-content-between">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-xs font-weight-bold text-primary mb-2">Toplam Üye Sayısı</p>
                    <h4 class="mb-0 text-dark fw-bold number-opacity"><span class="counter">25</span></h4>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <i class="fas fa-users fa-2x custom-icon-color"></i>
                </div>
            </div>
            <div class="mt-2">
                <small class="d-block small-margin text-opacity">Ayrılan Üye Sayısı: <b>Dayson Metin</b></small>
                <small class="d-block small-margin text-opacity">Sponsor Sayısı: <b></b></small>
            </div>
        </div>
    </div>
</div>

<!-- Toplanan Gelir Kartı -->
<div class="col-lg-3 mb-4">
    <div class="card card-stretch card-height shadow-sm border-0 rounded-4 custom-card-height">
        <div class="card-left-bar bg-success rounded-start"></div>
        <div class="card-body p-3 d-flex flex-column justify-content-between">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="text-xs font-weight-bold text-success mb-2">Toplanan Gelir</p>
                    <h4 class="mb-0 text-dark fw-bold number-opacity"><span class="counter">25</span></h4>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <i class="fas fa-lira-sign fa-2x custom-icon-color"></i>
                </div>
            </div>
            <div class="mt-4">
                <small class="d-block small-margin text-opacity">Sadece Ayrılan Üyelerden: <b>Gamer Berke</b></small>
                <small class="d-block small-margin text-opacity">Sponsor Katkısı: <b></b></small>
            </div>
        </div>
    </div>
</div>

<!-- Harcanan Gider Kartı -->
<div class="col-lg-3 mb-4">
    <div class="card card-stretch card-height shadow-sm border-0 rounded-4 custom-card-height">
        <div class="card-left-bar bg-danger rounded-start"></div>
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <p class="text-xs font-weight-bold text-danger mb-2">Harcanan Gider</p>
                    <h4 class="mb-0 text-dark fw-bold number-opacity"><span class="counter">25</span></h4>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <i class="ri-arrow-left-right-line fa-2x custom-icon-color"></i>
                </div>
            </div>                                
        </div>
    </div>
</div>
<!-- Kalan Bakiye Kartı -->
<div class="col-lg-3 mb-4">
    <div class="card card-stretch card-height shadow-sm border-0 rounded-4 custom-card-height">
        <div class="card-left-bar bg-info rounded-start"></div>
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <p class="text-xs font-weight-bold text-info mb-2">Kalan Bakiye</p>
                    <h4 class="mb-0 text-dark fw-bold number-opacity"><span class="counter">25</span></h4>
                </div>
                <div class="col-auto d-flex align-items-center">
                    <i class="fas fa-wallet fa-2x custom-icon-color"></i>
                </div>
            </div>                                
        </div>
    </div>
</div>
    <!-- Sayfa Sonu  -->
    </div>
    </div>
    </div>
  
<style>
small.small-margin {
    margin-top: -0.6rem;
}
.icons-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.text-opacity {
    opacity: 0.5; /* 0 ile 1 arasında bir değer belirleyin */
}
.number-opacity {
    opacity: 0.7;
}
.custom-card-height {
    height: calc(100% - 70px) /* Adjust this value as needed */
}
.custom-icon-color {
    line-height: 1;
    color: #e1e1e1; /* Equivalent to text-gray-200 */
}
.card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.card-left-bar {
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.iq-icon-box-2 {
    width: 60px;
    height: 60px;
}
.card-body {
    padding: 20px;
}
.card-total-sale p {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.card-total-sale h4 {
    font-size: 1.5rem;
}
</style>
    <?php include'footer.php' ?>