Product Preview Card Component

Howzit, for media queries, you can put the elements that need to be changed instead of putting all elements inside of it. That way it helps with making the code easier to follow. For 2 column layouts, when your parent container has a display: flex and a width: 50%, what will happen is that the elements will shrink or expand to fit the width of their parent container. What you can do instead is set a defined width such as width: 300px so that the columns will not shrink as the viewport size gets smaller, then you can use a media query to handle how the component should look like at smaller screen sizes.