Single Price Grid Component with Mobile-first Workflow

This was my first project using grid. It took some initial figuring out how to do the different designs between the desktop and mobile version, but eventually I figured it out.

Things I tried to do in this project:

• Proper semantic HTML. Someone said to use only <div>'s, but since all three blocks belong to one big element, I feel like semantic elements are appropriate here. The top block seems like an introductory element, so that one became a <header> while the other two are <section> elements.
• Efficient class naming and element styling. I tried to group elements that had the same styling together with the same class, and gave them other classes when it was necessary to style them differently or add some style on that specific element.
• Comments in CSS for extra navigation and structure.
• Mobile-first workflow
• Added some reactivity to the button, so I gave it some colours depending on the state and animated the transitions!