Адаптивная верстка, что я делаю не так?
@media (min-width: 400px) {} - это не media-переменная для телефона, это media-запрос, срабатывающий когда ширина больше 400px, т.е. это также и планшеты, и десктопы. Такое поведение абсолютно логично и правильно, это mobile first. Когда вы будете прописывать остальные media для устройств побольше - они будут добавлять и перезаписывать основные стили и стили из предыдущих media-запросов.
Если же нужно добавить стили жестко для мобильных, добавьте еще max-width, как советовали выше: @media (min-width: ...) and (max-width: ...) {}
!important пропиши для css и добавь max-width