Single price Grid component

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

I'm proud of how quickly I completed this. My last project took too long so this was refreshing.

I also really enjoy using Grid, it makes things so easy.

I think I misused my classes in this one. I received some feedback to get into the habit of targeting classes, not elements, so that when I start working with more content, I'm not always making global changes all the time. I tried to implement this here, but in particular, I used a <section> element for the card, with no class, but when I went to apply a box shadow all the way around, it also included other <section> elements with classes. When I tried to replace the targeting with a class name instead, my design broke. I'd like to be able to use specificity to a better degree in future.

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

I had some challenges with sizing in the media queries. For instance, in the mobile design, I wanted the <li> in the <ul> to only take up one line, as visually, there is space. But <ul> has a margin-left that I was unable to remove, thereby making some <li> take up two lines.

That being said, I completed these media queries perhaps the fastest I ever have.

I had something happen that's occured for me before, where in Desktop, I make some corners have a border-radius, but in mobile, if the design becomes one column and I want to remove it, I'm unable. I haven't managed to figure this out.

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

I'd like help with using classes for specificity. My HTML contains many <section> tags, which might not have been the best use. I also created <article> tags, but didn't call on them in the CSS. I'm not sure why my design breaks when I replace the card tag of <section> with a class target. I'd like to understand this as I didn't foresee it and attempting to do the box-shadow around the outside was one of the last things I tried to do.

How do I get rid of the <ul> margin? margin/padding: 0; has no impact.

Why am I unable to remove border-radius in the mobile design? I don't know why my declarations have no impact when I attempt it.