Product Preview Challenge - Using HTML and (mostly) CSS.

Hi Rodrigo, well done on your second challenge, and I'm glad you got that sense of satisfaction in completing it, especially with all the problem solving involved 😊

Some feedback here:

1. Good job centering the component using flexbox and especially using min-height instead of just height! Many people set a fixed height, and while that's alright when the entire component is seen, it won't be so good on smaller screen sizes, so anyway, good job here!

2. I see that you are using a * selector to normalize some of the styles, which is very good. The one thing I'd add here for sure is the box sizing declaration, which is probably one of the most important properties. All you need to do is add box-sizing: border-box to your * rule. While we're add it, might as well add one more rule for images underneath the star selector, and everything should look like this:

   * {
       margin: 0;
       padding: 0;
       list-style: none;
       box-sizing: border-box;
   }
   img {
       max-width: 100%;
       display: block;
   }
   

3. You're using grid here, and I can see that you got a line for setting column width (grid-template-columns: repeat(2, 1fr)), but you also got a width: 300px in the image and text containers. This fixed width would defeat the purpose of having repeat(2, 1fr), which supposedly would allow grid to automatically set the size of the columns based on the the size of the main container. What I would do is, in the desktop view I would remove the fixed width: 300px in both containers (since grid-template-columns already set the width for them already), and I'd give them a height: 100%. I'd add object-fit: cover to the img in desktop view, and possibly object-fit: contain in the mobile view. You also got a fixed width on main; instead of using width, I would use max-width: 600px. This should help the card be resized in smaller browser widths.

4. Lastly, instead of using margin all around the individual items in the text container, I would give the text container a padding (maybe 1.5rem or 2rem, you can play around with the values), and I'd only use top or bottom margins for the elements instead instead of left/right margins. I'd remove that margin-left on the button and give it a width of 100% instead.

That's about it, I think this could help make things a bit easier next time, especially in using responsive widths instead of fixed widths. Great job once again in solving the obstacles in this challenge, and keep working at it!