можно так:

<fieldset>
  <legend>About us</legend>
  <p>Lorem ipsum...</p>
</fieldset >

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

Если же нужно добавить стили жестко для мобильных, добавьте еще max-width, как советовали выше: @media (min-width: ...) and (max-width: ...) {}