React and Next.js 13.4 landing page using sass, grid and flex

As always, any tips, recommendations or suggestions are welcome. A few things...

• Not sure how to change the color of svgs on hover for the footer social logos. I tried a few things, but nothing seems to be working. Any tips?

• For the mobile menu, I have the initial state set to display:none and then on click I change it to display:block. The problem is that I want to add transitions such as opacity and scale, but to my knowledge we're still unable to add a transition to display, which negates the other transitions. I tried making it visibility: hidden, instead of display:none, but the problem there is that the menu is covering the clickable elements below and they become unable to click.

• Random, but is it just me or does it seem like the images that we're provided with for these projects are low quality? I know we don't want to use large file sizes for web, but they seem to be particularly small and therefor blurry on larger screen sizes. I just feel if you're adding a project to your portfolio and the images look blurry, it's going to look bad to the user/viewer. This project in particular has copy on it that says, "Increase your credibility by getting the most stunning, high-quality photos that improve your business image", but the images on the actual site are low-quality.