# Breakpoints — Fundação do Design System Phorte

> As três faixas de tela — Celular (base), Tablet (`md:`, 768px) e Computador (`lg:`, 1024px) — e em que largura testar.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/breakpoints
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

Três faixas, e só três (decisão do Marcelo, 2026-10-01). O celular é a base — a classe sem prefixo —, e cada faixa de cima muda só o que precisa: `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`. `sm:`, `xl:` e `2xl:` **não geram CSS**, e o `npm run audit` reprova quem as escrever (`faixaInexistente`).

| Faixa | Prefixo | A partir de | Teste em | Usos | O que muda |
| --- | --- | --- | --- | --- | --- |
| Celular | nenhum | 0px | 375px | — | O desenho de partida: uma coluna, menu na gaveta, cartões que rolam de lado. Toda classe sem prefixo vale aqui — e nas faixas de cima, até alguém mudar. |
| Tablet | `md:` | 768px | 768px | 238 | A virada principal: duas colunas onde havia uma, formulário lado a lado, o respiro da página sobe de 16 para 24px. |
| Computador | `lg:` | 1024px | 1280px | 75 | Três ou quatro colunas, a barra de menu inteira, prévia e nota lado a lado. A página para de crescer em 1320px (E56): acima disso, só a margem em volta aumenta. |

Teste também a 320px: é o reflow do SC 1.4.10 (400% de zoom em 1280), e nada pode rolar de lado.