All solutions

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!

The style guide for this challenge mentioned a mobile and desktop width (mobile: 375px, desktop: 1440px) but I didn't really know what to do with this information. The mobile and desktop design looked the same so I ended up simply designing the card based on the mobile width. What would be a better way to use this information to create a responsive design?

I also struggled to center the card in the middle of the screen. After some googling I ended up using

body {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

but this seems like a band-aid solution. Is there a better way to vertically align elements on the page?