If you use the `media` mixin instead, you just need to swap around the padding values so mobile styles are defined first (at the top of your cascade) with all overrides after that.

    @mixin phase-banner($state: alpha) {
      padding: 0.5em 1em;

      @include media(tablet) {
        padding: 0.5em 2em;
      }
    }

This will compile to (modern browsers):

      padding: 0.5em 1em;

      @media (min-width: 641px){
        padding: 0.5em 2em;
      }

...and for < IE9:

      padding: 0.5em 1em;
      padding: 0.5em 2em;

Older versions of IE get both styles but their place in the cascade ensures only whatever is last gets applied. In this case, the styles for tablet and up will be those used.

We are removing our legacy uses of the `media-down` mixin. Any new code should use `media`. Hope that clears it up a bit.