title: How to change value of variable in sass for multiple media queries
body: <p>SCSS:</p>
  
  <pre><code>$thick : 3px;
  $pad : 0.5em;
  $extra : calc(#{$pad} * 1.2);
  $color : #8DC73F;
  
  .footer__links {
    a {
      color: #333;
      padding: $pad $extra;
      display: inline-block;
      border: $thick solid transparent;
      position: relative;
      cursor: pointer;
      letter-spacing: 0.07em;
      }
  }
  </code></pre>
  
  <p>I want to change the value of <code>$pad</code> for different media queries.</p>
  
  <p>For example: </p>
  
  <pre><code>mobile --&gt; $pad : 0.3em, tablet --&gt; $pad : 0.5em
  </code></pre>