Time Tracking Dashboard with Next.js

I struggled a lot with handling the SVG images in this challenge, both getting them to overlap properly with other elements and also trying to keep them from deforming in a way that could be reused in the component I made for the time tracking cards. I did end up solving the overlap problem by giving the SVG z-index: -1 and the background element z-index: -10.

I also managed to get both the mobile and desktop views to look passable, but I had trouble making everything in between look alright. The way the breakpoints are setup are still pretty rough, so I might go back and adjust those later.

Is <Image /> the best way to handle SVGs in Next.js at the moment? When I was looking for solutions to my problems I read that some people gave up on using it, but I also saw that it was overhauled recently, so maybe the problems it had initially have been addressed.

What is best practice in regards to making varying styles for a single component, such as the cards for the different time categories in this project (Work, Play, etc.)? For this project I created an object to store the styles (classes for Tailwind to handle) and accessed them based on properties passed down to the component, but I'm not sure if this approach is ideal.

Thanks for checking out my solution!