Responsive landing page using grid, flexbox, html, and sass

I found it quite difficult to position the orange background image near the footer. Whenever I try to make it go to the bottom right, it breaks the viewport and creates a horizontal scroll. Adding overflow:hidden to the footer works, but it cuts the image so it looks terrible -- this means it isn't the best way. I also noticed that the three breakpoints do not cover laptops with small screens, such as a 13 inch MacBook air -- the desktop media query only kicks in at 1440px. Should I just add one more breakpoint for 1200px?

In terms of best practices, I've been using a lot of nesting in my CSS. Curious to know when nesting becomes too much, or if I'm using it alright.