title: How to override Foundation's display:inherit property for visibility classes?
body: <p>I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like <code>.show-for-small-only</code> as Foundation applies </p>
  
  <p><code>display: inherit !important;</code></p>
  
  <p>to any element which uses these visibility classes. (For example, see line 5808)...</p>
  
  <pre><code>.show-for-small-only {
      display:inherit !important;
  }
  </code></pre>
  
  <p>This is causing me issues. Say have an element that I want to <code>.show-for-small-only</code>:</p>
  
  <pre><code>&lt;div class="someElem show-for-small-only"&gt;
      &lt;!-- Content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Yet I want this element, when shown, to be formatted as a <code>display:inline-block</code> element. Due to Foundation's use of <code>!important</code>, the div is forced to assume it's default display state of <code>block</code>. </p>
  
  <p>Is there any workaround to this, short of declaring my styling as <code>!important</code> too? (I don't want to have to do that though)... </p>