Responsive business analytics card

👾Hello Atharva Hinge, congratulations for your new solution!

I decide between flex or grid in base of the complexity, for example, if is a complex layout I use grid is is a simple component I use flex.

In this case I choose grid because was easier to create the component with two colum, all I needed was max-width: 1000px and display: grid and grid-template-column: 1fr 1fr to have a component with two column with 50% of the parent.To add the exact same purple overlay effect for the image, matching the design files you can use, filter or mix-blend-mode. See the code below

img {
mix-blend-mode: multiply;
opacity: 70%;}

👋 I hope this helps you and happy coding!

Hey Atharva, congrats on completing the solution of this challenge

Regarding your question, I personally use more flex but because is easy to pull out the trick for most of the cases that positioning is needed, and use grid for more complex-multiply columns or rows layouts, for example, for an e-commerce product list I would probably use grid, but for a 1 row navbar I will use flexbox.

Also regarding your project, you should try using this as your pseudoelement color on your image and see if it looks better: background-color: #AB5CDB; mix-blend-mode: multiply;, I think this one is closes to the design one!

Hope my feedback helps you!