Order summary using HTML and CSS

I didn't have a lot of difficulties for this project. However, I wanted to focus on writing clean code and HTML structure, while having good accessibility.

For this to be achieved, I used semantic HTML tags like main, footer and article and tried not to use much div boxes. However, for the part of the plan price, I had to use several div to wrap the elements and apply flexbox to the image and text, and then to both the image+text and anchor tag. Do you have any thoughts about how to do this part with best practices?

I also tried to follow a BEM methodology to name the classes.

For the CSS part, I focus on using rem units so that the design could be responsive. Is it better practice to use rem or em units?

Also, I am not sure about how is the best practice to make the card component bigger and responsive, just by adjusting its width using % or rem, or is it better to use another property?

I will keep on doing some challenges and keep on learning. If you have any suggestions, I would really appreciate it.