How to make make carousel card to to being as tall as the tallest card

Question

I am using the glidejs to make this carousel. I can't figure out how to make the cards have the same height as the tallest one and being responsive at the same time. (See below)

I have tried to set the .glide__slides to have height: 35vh and make the card height 100%. This makes the cards have the same height but there is a big white gap at the bottom as shown below when on a smaller width screen

Here is part of my code

<div class="container-fluid bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-2 my-auto">
                <h1>Latest Products 2021</h1>
            </div>
            <div class="col-lg-10 mt-3">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides">
                            {% for product in latest_products %}
                                <li class="glide__slide">
                                    <div class="card px-2 h-100">
                                        <a href="{{ product.get_absolute_url }}">
                                            <img src="{{ product.image.url }}" class="carousel-image" alt="{{ product.name }}">
                                        </a>
                                        <div class="card-body">
                                            <a href="{{ product.get_absolute_url }}" class="text-decoration-none">
                                                <h5 class="card-title">{{ product.name|truncatechars:30 }}</h5>
                                            </a>
                                            <h6 class="card-subtitle mb-2 text-muted">RM {{ product.price }}</h6>
                                            <button class="btn btn-sm btn-success">Add to Cart</button>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="glide__arrows" data-glide-el="controls">
                        <button class="glide__arrow glide__arrow--left text-dark" data-glide-dir="<"><i class="fas fa-arrow-left"></i></button>
                        <button class="glide__arrow glide__arrow--right text-dark" data-glide-dir=">"><i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>