O engraçado é que você traduz mobile para max width. Você não usa o conceito de mobile first no exemplo, o que torna a construção do css responsivo mais difícil.

Eu usaria desktop tablet ou desktop com min width.

Esse foi apenas um exemplo de como você pode usar o at-rules-rewrites.

`@media mobile` você define. O exemplo apenas mostra que você pode criar rewrites para suas próprias regras at-rules.

Então se você tem:

```json
{
    "atRulesRewrites": {
        "abcdef": "media (max-width: 1000px)"
    }
}
```

Quando escrever `@abcdef`, ele irá reescrever para `@media (max-width: 1000px)`. Não funciona como um text-replace, é um pouco mais complexo que isso, pode ver no código fonte como ele faz essa busca.

De qualquer forma, não há nada de "mobile first" aí. Não tem conceito nenhum, você escreve do jeito que quiser. Se quiser fazer 10x regras para cada breakpoint diferente, tudo bem, o compilador irá reescrever conforme aparecerão.

Você pode escrever o seu `@media desktop`, `@media lg`, `@media tablet`, e etc...

O engraçado é que você traduz mobile para max width. Você não usa o conceito de mobile first no exemplo, o que torna a construção do css responsivo mais difícil. Eu usaria desktop tablet...