Mobile-first, CSS Grid Price Component

Hi everyone,

This was my first time using grid outside of tutorials, so I would be grateful for any feedback on how I have used it.

I also had some issues which I hope some people can help me out with:

1. Aligning the text / button as shown in design.

At first, I added display:flex to the card container, and then justify-content: space around, so that the text would space out evenly. However, I found that once I did this, I couldn't fine-tune the alignment for some of the items which needed to be closer together e.g. The h2 and p in the top box, which are closer together.

1. The use of Widths and Heights

I felt like with this challenge, since the whole component was centred in the middle, I had some issues with making the container size up correctly on different mobile sizes without sections getting cut off. Hence why on mobile, my solution doesn't look exactly like the design, as when I increased the padding on elements, the container would start getting cut off on smaller widths. If anyone can look at what I've done and tell me some improvements, that would be great.

1. White line at the bottom of the component, due to the box shadow.

I've added a box shadow on the component, but when I add it, I see a white line at the bottom of the component and I'm not sure why. Does anyone know?

I would also appreciate any other general feedback.

Thanks!