Html, Css, Grid and media queries

What are you most proud of, and what would you do differently next time?

In the header tag is the image and h1, and when the layout switches to mobile, the image is in the left column and h1 is in the right column. Although both labels are together using the header tag

What challenges did you encounter, and how did you overcome them?

In the desktop layout it is one image, and in the mobile layout it is another, for this I used the tag with the tag, where I used a media attribute, so I could change this image according to the device size.

I also used:

header {
        display: contents;
    }

Since and are inside the tag, in desktop mode the image must be in the left column and the h1 in the right column, using display: contents removes the box contention, without having to eliminate the html semantics