Responsive single price grid component solution (SASS, BEM)

Hello @denissejoyce 👋👋👋

Nice work on the challenge!! It is looking good and close to the design. I notice that you are using extra hidden heading (sr-only) and it is good practice (improve semantic).

Here is my feed back for you:

• About naming classes, instead of naming it with parent & child relationship, for each small section you can pick an unique name for it. For example,

// you can flat it out to avoid deep nesting
intro__section
    intro__title
    intro__subtitle
    intro__description
subscription__section
    subscription__title
    subscription__price
    subscription__description
    subscription__link
why__section
    why__title
    why__list
        why__item

• About naming variables (colors), depend on the scale of the project you could simply name all the variants of each color such as color-500, color-600 and use them directly. Or if you want your system to be more robust you can define local colors variable for each component like item--clr-hover and use it for itself or child elements. However since you are using SASS, there are so many way to utilize functions/mixins to solve different problems. At the end, you need to practice a lot to figure out what do you need.

Hope this help 🌴🌴🌴