Multi-item carousel card deck images

Expected behavior

Images in carousel card deck need to have the same height to be uniform.

Actual behavior

Image heights are drastically different that it makes the card decks uneven and not appealing to look at.

Resources (screenshots, code snippets etc.) I copied the code exactly as it is in the example in Carousels Page. I've seen in the forms about doing something like this but no matter what I try to do to set a height for the images it doesn't work:

HTML Code:

  <!--Main Layout-->
  <main class="text-center py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="testimonials">
              <div id="test">
                  Testimonials
              </div>
              <mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'" [animation]="'slide'">
                  <mdb-carousel-item *ngFor="let item of slides; let i = index">
                      <div class="col-md-4 pb-2" *ngFor="let card of item; let cardIndex = index">
                      <mdb-card class="my-1 h-100">
                          <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
                          <mdb-card-body>
                          <mdb-card-title>
                              <h4>{{card.title}}</h4>
                          </mdb-card-title>
                          <p>{{card.description}}</p>
                          </mdb-card-body>
                          <mdb-card-footer>
                          <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>
                          </mdb-card-footer>
                      </mdb-card>
                      </div>
                  </mdb-carousel-item>
              </mdb-carousel>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!--Main Layout-->

TS Code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class Header implements OnInit {
  cards = [
    {
      title: '1',
      description: 'Test',
      buttonText: 'Read',
      img: 'https://images4.fanpop.com/image/photos/18200000/-Random-photos-of-random-actors-actors-18294023-333-500.jpg'
    },
    {
      title: '2',
      description: 'Test',
      buttonText: 'Read',
      img: 'https://cdn.wallpapersafari.com/94/50/KWBjpc.jpg'
    },
    {
      title: '3',
      description: 'Test',
      buttonText: 'Read',
      img: 'https://images6.fanpop.com/image/polls/1280000/1280392_1379438916461_full.jpg?v=1379438936'
    }
  ];
  slides: any = [[]];
  chunk(arr: any, chunkSize:any) {
    let R = [];
    for (let i = 0, len = arr.length; i < len; i += chunkSize) {
      R.push(arr.slice(i, i + chunkSize));
    }
    return R;
  }
  ngOnInit() {
    this.slides = this.chunk(this.cards, 3);
  }
}

SCSS Code:

@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');

.carousel-item {
    &.active,
    &.carousel-item-right,
    &.carousel-item-next {
      display: flex !important;
      flex-wrap: wrap;
      height: 600px;
    }
  }

Example of how the pictures show up:

Any help is much appreciated