Responsive Card Layout using Grid

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

I managed to complete the project with few problems. Next time, I would hopefully spend less time on those few problems having gained experience from them.

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

Three challenges here:

1. Background image for the first card. I had never used these before. The effect was achieved using a few CSS properties which were easy to find using MDN.
2. Layout of the student information (image, name etc). I resolved this by removing the default margin from the paragraph elements so I could put the grid cells closer together, and then adjusted their distance using row-gap.
3. The most confusing problem occurred when I gave each of the cards a grid area. My idea was to give the cards a grid area in their styling but only use the grid area later in a media query. Before I added the grid areas, the cards sat nicely in the single column I created, each getting an automatic row. After giving the grid area (but not using it), the automatic rows did not work and all of the cards sat on top of each other.

What specific areas of your project would you like help with?

My problem relates to point number 3 above. It seems it would be nice to give an element a grid area with the intention of using it only later in a media query. This however seems to have stopped the automatic assignment to rows happening. I tried also assigning grid-auto-rows: auto and this fixed it but then broke my desktop layout when I wanted to use the grid areas in a media query.

My question is: am I right in thinking that once a grid-area is assigned, the layout must be done using the grids areas? Or was something else causing this? My solution was to assign the grid areas only in the media query, but if you look at my CSS, it seems better to put the area names in the styles before the media query.

Thanks