max-device-width è una mediaquery che controlla la dimensione del device, non quella del viewport. Nell'ambito mobile le due dimensioni normalmente coincidono, ma in ambito sviluppo su desktop invece no

cambia max-device-width in max-width e le modifiche saranno dipendenti dalla dimensione del viewport (ovvero della finestra del browser)