Distribute spacing with negative gap

I want that my cards inside of flexbox distribute evenly depending on the height of my div like in this gif, but I can't find a way to do it. Because gap can't be negative, margin top auto can't go to negative either and the other options modify the height of my card.

figma exemple

I need that option because the number of cards change and I want that all of it to display on the screen.

This is my actual code:

<div id="Page2"><template id="card"><div class="cardDesign"><h2></h2><img id="CardLogo" src="/img/kidebit_logo_outline.png" alt=""><img id="NFCicon" src="img/NFC.png" alt=""></div></template></div>

#Page2 {    display: flex;    flex-direction: column;    height: 50vh;    width: 100%;    align-items: center;    padding-top: 200px;    max-width: 332px;}.cardDesign {    display: flex;    justify-content: space-between;    align-items: flex-start;    padding: 18px;    width: 100%;    height: 182px;    margin-top: -140px;}