Les cartes alignées

.cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  list-style: none;
}

.cartes li {
  display: flex;
  flex: 1 1 14rem;
  max-width: 20rem;
}

.carte {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.carte .bouton {
  margin-top: auto;
}

Dans 1000 pixels : quatre cartes demandent $4\times 224+3\times 24=968$ pixels, cela tient ; cinq en demanderaient $1120+96=1216$. Quatre cartes par ligne, donc, avec $1000-968=32$ pixels libres, 8 de plus par carte : 232 pixels chacune, sous le maximum de 320. Les cartes d'une ligne s'étirent à la même hauteur (stretch), et la marge automatique pousse chaque bouton en bas.