Product Preview Card Component (Responsive Mobile Design)

Hi @majdiachour1. Nice work, here is some feedback: Instead of giving your entire .grid container a border-radius at once, you could target the image container and text container seperately and use the border-top-right-radius property for only the top right border and border-bottom-left-radius to target the left bottom radius and the same for the other borders that needs a border-radius. As you can see that by targeting the entire grid container, it gives your inner borders a radius which is different from the original design. try this:

.pic { border-top-left-radius: -- px; border-bottom-left-radius: -- px; } And do the same for the info selector on the right side. You will notice that this will give your design a straight border in the middle as with the original design. I hope this helps. Happy coding:)

You could use Clamp( ) method in CSS for responsive design to change size of your elements ( Font, img, div, etc....) according to your viewport size and different layout dimensions to fit with several devices. Other than that, nice work and keep going on.