title: Foundation media query - hide-for-small-only
body: <p>The .hide-for-small-only is max-width 0 - 39.9375em</p>
  
  <p>But the .show-for-small-only is at 0em - 40em.</p>
  
  <p>Shouldn't the .hide-for-small-only be 0 -40em since that is the number for .show-for-small-only? Why is there a max-width different between these two queries.</p>
  
  <pre><code>@media screen and (max-width: 39.9375em) {
    .hide-for-small-only {
      display: none !important; } }
  
  @media screen and (max-width: 0em), screen and (min-width: 40em) {
    .show-for-small-only {
      display: none !important; } }
  </code></pre>