3-Column Preview Card Component

What are you most proud of, and what would you do differently next time?

I'm happy that I'm doing these challenges. I'm seeing improvements.

What challenges did you encounter, and how did you overcome them?

Challenges:

1. Deciding Flexbox or Grid
2. Confused main with body - I was applying "display: flex;" to the body and wondering why it's not reflecting on the browser. And I learned that main is actually different from the body and it is an element which is parented to the body and can have different properties set to it just like other elements. All this time, I was confusing it with the body.
3. Media query - I wanted to have all the elements positioned center horizontally and vertically, so I gave body the body { display: flex; justify-content: center; align-items: center; }. Although It worked fine on the desktop screen, it pushed the content to beyond the top on mobile screen, made almost the 1/3 of the content disappeared. Then I used the media query @media (min-width: 30em) { } and encapsulate the body with the required properties and it works magic. Solved my problem.

What specific areas of your project would you like help with?

I want help with card's position on mobile screen. On the mobile screen, in the design the card has space on all four sides. I gave margin properties to the card to give space on the left and right, but it didn't work for the top and bottom. If the margin is given on the top and bottom, it only shows on the top and ignores the bottom side. ** I would really appreciate if someone help to solve the problem**.

And also I would really appreciate a review on my HTML and CSS. And suggestions to improve it.