Media Queries

      Media queries let you apply CSS only when conditions match (mostly screen width).
      
      ## Why they matter
      Without media queries, a 3-column layout may look perfect on desktop but unreadable on mobile.
      
      ## Most common pattern
      Desktop default, then adjust for smaller screens:
      
      ```css
      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      
      /* Mobile */
      @media (max-width: 600px) {
        .cards {
          grid-template-columns: 1fr;
        }
      }
      ```
      
      ## UI imagination
      Desktop: 3 cards in one row  
      Mobile: cards become a single vertical list  
      
      ## Which widths should you use?
      Instead of memorizing many breakpoints, use a simple approach:
      - 600px: phones
      - 900px: tablets
      - 1200px+: large screens
      
      But the best breakpoint is:
      “when your layout looks broken”.
      
      ## Graph: breakpoints
      ```mermaid
      flowchart TD
        A[Layout looks fine] --> B[Screen shrinks]
        B --> C{Layout breaks?}
        C -->|No| D[No need breakpoint]
        C -->|Yes| E[Add media query]
      ```
      
      ## Remember
      - Media queries are for layout fixes, not decoration
      - Keep them minimal and purposeful