Grid & Flex Social Proof Section

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

I'm proud of my use of grids - I feel I understand it well. I'd like to make use of grid-area next.

I wish I had simplified the responsive design earlier. I think I overdid it, although it works well. I could've made the <main> a flex row in an earlier media query and then perhaps had less of them to write.

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

It was somewhat challenging to arrive at the staggered grid effects, but I understand how to approach it and it wasn't as hard as I thought it could be. It just took a bit of time.

I found making this design responsive difficult. I had 3 main sections to work with - <header>, <aside> for the ratings and <section> for the reviews. My original design had a flex-row with wrap. This ended up getting difficult as I scaled the viewport down to mobile. I'm not sure if there was a simpler way. I spent longer on this than I would've liked.

I also had a hard time with the bg-img and I don't feel confident positioning these yet, especially when it comes to adjusting for responsiveness. I'd like support with this.

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

1. Please review my Sass and let me know how I could make better use of it here.
2. Please test the responsiveness and see where you think it could be improved.
3. How can I use bg-img well in this design? I positioned it correctly for desktop but it's not responsive and it doesn't cover the entire viewport, it cuts off. I'm not confident with those properties yet so I'd appreciate help with this!