Querying only desktop sections directly in the groq query for a responsive header setup.

In my header setup, I have an array of sections for desktop and an array of sections for mobile(allows for a lot of customization). Is there a way I could only query the desktop sections when my screen is bigger than 767px directly in the groq query? I'm using Next.js app router and I'm not wanting to turn the entire header into a client component by checking the width that way.

that approach may make for a ton of queries in the event of a browser changing size.
Typically in the event of a header/footer or general site settings, it's best to query once from the server side and setup responsiveness using the front-end.

Oh wow, didn't even think of that haha. I'm sure that would have made my usage go up a bunch. Thank you!