Bootstrap carousel with different size cards - css

Question

I have a carousel faq, there are some boxes with different questions and answers, so the boxes are not the same size as you can see above:
My code is this one:
<section id="faq" class="shadow-lg">
<div class="container text-center">
<h3 class="font-weight-light">Faq</h3>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="col carousel slide w-100" data-ride="carousel">
<div class="row carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
css:
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
#faq{
padding-bottom: 80px;
}
#faq h3{
padding-top: 50px;
padding-bottom: 50px;
}
#faq .card{
border-color: #216869;
min-height: 400px;
}
#infos, #contato, #faq, #planos{
font-family: Montserrat-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
I want the boxes to be at the same height, regardless of the size of the questions. Basically, I want all the boxes to be the same height as the largest.