Hello.
I wanted to mention about the picture size (which you mentioned in your challenges) - it looks like the image and the description (or article) both take 50% of the main component.
One solution could be to make a div for the image, make the image it's background-image, set to 100% height and witdh, the image block to 50% of the main parent component. And do the same to description block.
Very good use of srcset for the picture, really helps the responsiveness.
Also, a very good use of comments in styles file. It's always helpful to use comments in html files as well, as it helps its readibility for other coders who might be involved.
I'd also suugest using classes alongside semantic tags - the semantic approach is done very well, however, using classes can help scalability for a project. I suggest using BEM approach, but there are others methodologies as well (some coders use bootstrap way of naming the classes even when they don't use bootstrap).
I think once you correct the width of the image and the description blocks, it should be good.
Also, I'd suggest styling the height (as provided in the design) for the main component (<main>).
