Cartões de inicialização com 100% de altura e margem inferior

Estou tentando desenvolver uma grade de placas do Bootstrap 4 com os seguintes requisitos:

Todas as cartas devem estar dentro de uma divclass="row", porque não sei quantas cartas haverá no total e quero que as linhas tenham boa aparência em diferentes pontos de interrupção da tela.As colunas nesta linha têm tamanhos diferentes em diferentes pontos de interrupção (por exemplo,col-sm-6 col-lg-4)Dentro de qualquer 'linha exibida' individual, por exemplo, uma linha de cartões mostrada na tela a qualquer momento, cada cartão deve ter a mesma altura.Cada cartão deve ter uma margem na parte inferior para que seja separado de todos os outros cartões.

Consegui chegar quase até lá, mas estou com um problema: definirclass="h-100" nos meus cartões para garantir que todos tenham a mesma altura, mate a margem da parte inferior de cada cartão.

Existe uma maneira de garantir que todos os cartões em qualquer linha exibida tenham a mesma altura, preservando uma margem na parte inferior deles?

Código HTML :

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

JSFiddle Demo

questionAnswers(1)

yourAnswerToTheQuestion