I'm a beginner in the world of design and Bootstrap, so please be patient with me.
My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wide as the largest card among them. I am open to any solution, not just limited to using Bootstrap. For example, on larger screens, the height and width of the rows and cards increase incrementally, while on medium screens, each row has different heights:
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 my-3 d-flex">
<div class="card h-100">
<img class="card-img-top" src="https://via.placeholder.com/340x440/4472c4/FFFFFF" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some brief text to showcase what's inside the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
... Additional code for more card sections can be added here ...
</div>
</div>
</section>