Responsive 3 column preview card

Frontend Mentor - 3-column-preview-component

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Process:

1. This component responsive for any devices started with desktop first approach.
2. Then I used display: flex method to align cards and add flex-basis at 50% when width down to 900px.
3. I have added background images in ::before div section when hover that cards and put the opacity to 0.6 to view text easily.
4. I have added media queries with BEM method in SCSS to change the responsive for any devices from 400px to 1440px.

What I have mistaken here while was making,

1. I messed up with responsive of the component while was adding background images in each cards.
2. I forgot to add margin and padding in each section and forgot about flex-basis.
3. I didn't positioned background images well while hover the component.

Languages I used for this component,

1. HTML
2. CSS
3. SCSS

I really need suggestion to scroll the page when scroll the component, I think i made a mistake here in my opinion.

All feedback is greatly appreciated!