A solution using flexbox and my first time using Sass!

For now I made the columns non-wrapping flex items and used a media query to create a breakpoint where the flex direction turns from row to column for the mobile view.

.card-wrapper {
    display: flex;
}

@media screen and (max-width: 750px) {
  .card-wrapper {
    flex-direction: column;
}

Is there a better way to do this, perhaps without media query? Or would grid have been a better option altogether?

Also, when resizing the desktop browser's width, the lines of the paaragraph did not break at the same time for each column which caused the buttons to stop being aligned with eachother. I solved this by putting all elements in the card in a flex column and giving the main text paragraph a flex-basis of 50%.

.card-wrapper .card {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.card-wrapper p {
  flex-basis: 50%;
}

I doubt this is the best way to handle this issue, can you suggest a better way?

Thanks in advance!