Single Price Grid Component Using CSS Grid

When I took the initial attempt, I did not approach with mobile-first workflow mindset and set a 2x2 grid that I wanted to change to a 1x3 grid with a media query using max-width, but couldn't seem to make the grid to change for whatever reason. Is there any specific reason why this might've been the case?

Also, I've had to adjust margins and padding much more this time than in other challenges I've done, and would like feedback on if there's a method to not have to adjust the margin and padding as often, especially when applying the media query.