HTML CSS Grid and Flex

Hi Pascal,

This is a good attempt. I've outlined below what you need to do to get it closer to the mockups:

• Firstly, remove the width: 100vw and width: 300px on your parent container. Neither should be used, as they cause overflow issues, which is what's happening here. You should set a max-width of, for e.g., 1000px and a width: 100% so anything below the max-width in the viewport will mean the content will occupy the full space it can.
• You need to replace the current way the img elements are being used in the div with a <picture> element for them instead. Here's a link from MDN explaining this Link
• Use CSS grid on the parent element for the columns and change this flow for viewports lower than 600px.
• Locally host your Google Fonts for privacy and performance reasons. Here's a good video explaining this in further detail Link

Hope this helps!