The only thing you really need to focus on is the responsiveness as was already mentioned. As far as your usage of media queries, the reason it doesn’t seem to you like you’re using “too many” TO YOU right now is because you’re thinking from “big screen” to “small screen” with the way you’re applying them.
When approaching it from that angle you naturally balance and fit everything on your screen. So you don’t have to shrink it down much before things start getting cut off, so you have to stop and adjust them. Then when you shrink the window 2px smaller, another scroll bar appears. So you NEED to keep applying all those media queries to tame things smaller and smaller.
If you were to start your project out at 260px-300px wide and make your default styling for the site suit that size aesthetically with good spacing, you can just expand the page until it gets to a point where there’s too much space or everything being stacked up feels like a waste of screen. From that point you can set a
min-width property instead of a
max-width inside of your media query. Once you have things looking good at that size, you can expand out again and find where it doesn’t feel balanced and or wastes space and modify again. Then if one day you discover you need to go even BIGGER than wherever you stopped, it’s a lot easier to just tack on another media query that expands things.
At the end of it all even if you did have that the same amount of media queries, they would all have just a couple of things in them nearly to the point of almost being useless. Even in those instances a lot of times the responsiveness you want to achieve can indeed be done using units and properties such as
max-width/height, using percentages, etc. So applying those natively to your elements and changing them subtly as they reach the boundaries of their aesthetics and balance will indeed greatly reduce the number of transit points you need in your code.