.cards {
    display: flex;
    flex-wrap: wrap;
    
 }

.caption {

	/*text-align: center !important;
	color: white !important;*/

}

.card {
    
    flex: 1 0 300px;
    box-sizing: border-box;
    margin: 1rem .25em;
    background-color: transparent !important; 
    height: auto !important;
    border: none !important ;

}
The media queries are where the number of cards is determined:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}
 
@media screen and (min-width: 60em) {
    .card {
        max-width: calc(50% - 1em);
    }
}