What is the syntax for setting a breakpoint using a media query?

0-2 years experience

1. 1We need a simple mobile layout that switches to a two‑column grid at 600px. How would you write the CSS breakpoint for that?
2. 2If you add a media query with `@media (min-width: 768px)` but the styles aren't applying, what could be wrong with the syntax?

2-5 years experience

1. 1You’re adding a new component to an existing responsive page, but after adding `@media (max-width: 1024px)` the layout breaks on tablets. Walk me through how you’d debug the breakpoint syntax and ordering.
2. 2Our design system defines breakpoints in a SCSS map, but a teammate wrote a raw `@media screen and (max-width: 768px)` rule that isn’t overriding the component styles. Explain why the syntax might be causing specificity issues and how you’d fix it.

5-8 years experience

1. 1We’re building a design system used across dozens of applications, each with its own set of breakpoints. How would you structure the CSS/SCSS syntax for breakpoints to keep them maintainable and avoid duplication?
2. 2During a performance audit we discovered that many media queries are duplicated across files, causing extra CSS payload. Describe a strategy for centralizing breakpoint syntax and the trade‑offs involved.

8+ years experience

1. 1Our company is migrating legacy CSS to a CSS‑in‑JS solution while preserving existing breakpoint behavior. What architectural considerations would you make to translate the media query breakpoint syntax, and how would you ensure consistency across teams?
2. 2We need to support a global responsive design that must adapt to both web and native mobile platforms, each with different breakpoint definitions. How would you design a shared breakpoint system that scales across these platforms while keeping the syntax clear for developers?