Responsive design is shifting from viewport-driven (media queries) to intrinsic / behavior-driven (the layout adapts to its content and container). AI tools accelerate CSS output but default to the older patterns. This doc covers what changed, the correct modern patterns, and where AI-generated CSS goes wrong. 1. The old model Layouts switched at fixed breakpoints: .card { width : 400px ; } @media ( max-width : 768px ) { .card { width : 100% ; } } Enter fullscreen mode Exit fullscreen mode Problems at scale: duplicated media queries inconsistent spacing specificity wars rigid, device-specific layouts 2. Utility frameworks solved operations, not responsiveness Tailwind and similar tools solved consistency, speed, onboarding, predictable spacing — not responsiveness itself. <div class= "p-4 md:p-6" > ... </div> Enter fullscreen mode Exit fullscreen mode md: = @media (width >= 48rem) — still a viewport breakpoint.…