Responsive 3-Column Preview Card, CSS Grid and Flexbox

Hello, this is my Solution for the 3-Column Preview Card Challenge.

I'm currently getting into responsive design and hope you can help me getting better at it.

Questions: When looking on a Mobile Device I have a margin at the top of the Screen but not on the bottom, how can I fix this without using negative Margins?

When putting a transition tag on my button to make the hover more smooth the animation always triggers when the Site reloads. How can I prevent this?

Thanks for every Feedback and Tips!