All solutions

The process was quiet linear. I've, first, set HTML structure. Then I've added all the basic CSS like variables for fonts, colors, background-colors, font-families etc, then matched CSS selectors with all the classes I've given while writing HTML

I've been stuck for a while when trying to make the right side of the product card be spread (in height) within its container. I've also been stuck when trying to make both sides take 50% of the main container when screen width is more than 600px. The problem was that I've set max-width: 100% for image to fill its container, that's why it wouldn't scale when setting main container as a flex container. So, I had to overwrite it in media-query.

The process was a lot less messed up then the previous project. It was more smooth then the previous one. I did less jumping from here to there while styling in CSS. I tried as much as I can to follow the workflow I've made this project with mobile-first "method"

When I finished the project I realized that I did those two parts of the component separately while they are actually both lay in one container and the blue section is another container inside the major container and the right white section is either another container next to the blue one or is just the part of the main container but placed in its right side

When I tried to fixed it it broke some layout, so I decided to let it be as it is, because it almost matches the target design and it looks not bad.

Definitely need to get more practice of "coding flow". I mean I have to understand better how to code adherently, logically, methodically instead of coding jumping from one part of the project to another, making some small changes here and there.

Also, I would like to get some hint or help with getting rid of extra empty space below my text elements when screen size is 800px+ - once I set the screen size (in Chrome DevTools) to 800px empty space appears below my heading and paragraph