Html – Problem with Aligning card-footer on Bootstrap 5 cards

Im building a website for the electronics store I work at. However, im building cards with Bootstrap 5. First issue I had was the cards were not the same height. I fixed that by setting the height of the card to 100%.
The issue I am having is with the card-footer element. I want this element to be on the bottom of the card and to be on the bottom of everycard. The footer contains the sku and price of each item. Issue is they don’t go to the bottom. Here is a website for reference.
http://demo.nictech.x10.mx/stereos.html.

If anyone can help me im truly stumped on this one. here is my code.

<div class="col-md-12 col-lg-3 mb-4 mb-lg-0">
    <div class="card bg-white text-black h-100">
      <div class="d-flex justify-content-between p-3 erounded">
        <img src="img/panasonic.png" class="productlogo">
      </div>
        <img src="img/panasonicakx640.jpg"
        class="card-img-top productimage" alt="Panasonic AKX-640" />
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <p class="small"></p>
        </div>

        <div class="d-flex justify-content-between mb-3 card-header cbcolor">
          <h5 class="mb-0 h5productname">SC-AKX640K</h5>
        </div>

        <div class="d-flex justify-content-between mb-2 cbcolor">
          <p class="text-muted mb-0">
            <ul>
              <li class="lipt">1700 Watt RMS Power</li>
              <li class="lipt">AM/FM Radio</li>
                    <li class="lipt">CD Player</li>
                    <li class="lipt">Aux In</li>
                  <li class="lipt">Bluetooth</li>
              <li class="lipt">Dual USB</li>
              </ul>
          </p>
          <div class="ms-auto text-warning">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
        <div class="cbcolor card-footer ">
          <h5 class="text-dark mb-0" align="left">SCAKX640k</h5>

          <h5 class="text-dark mb-0" align="right">$449.99</h5>
        </div>
      </div>
    </div>
  </div>

Here is the contents of the style.css file.

.c-item {
    height:480px;
}

.c-img {
    height:100%;        
    object-fit:cover;
    filter:brightness(0.6);

}

.c-card  {
    height:100%;
    
}

.productlogo        {
max-width:75px;
max-height:25px;
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}

.productimage       {
max-width:150px;
max-height:175px;
display: block;
margin-left: auto;
margin-right: auto;
width: 75%; 
}

.h5productname      {
text-align:center;
}

.lipt       {
font-size: small;
}

.color  {
background-color:rgb(240, 240, 240)
}
.erounded   {
border:black;
border-width:1px;
}

.nbc     {
background-color:rgba(204,0,0,255);
}

.bbox   {
border-width: 4;
border-color:black;
color:black;
background-color: white

}

I have tried making all the logo and product image files the same size respectively. That did align most of it but where the descriptions for each are different sizes. I can’t manage to put it to the bottom. I have even tried spacing it to the bottom and that didn’t work. I am still fairly new to all of this but I am working and im loving building this. I have also tried some older bootstrap 4 elements to see if that would fix it and no luck.