Responsive Outlook mail footer with CSS

Question

To create a responsive html signature, I tried the infamous <style scoped> tag. As far as I understood there's a conflict with @media queries. Is there a better way to achieve this in a way I can use it in MS Outlook client, preferably both on PC and smartphone?

Here's a reduced version of what I have:

<style scoped>
  #containter {
    width: 100%;
    height: 250px;
  }
  #firm-contact {
    width: 35%;
    float: left;
  }
  #firm-links {
    width: 290px;
    float: left;
  }
  #firm-logo {
    margin: 2% 4% 1% 4%;
    width: 165px;
    float: left;
  }

  /* screenwitdh <= 980px */
  @media screen and (max-width: 980px) {
    #containter {
      height: 580px;
    }
    #firm-contact {
      width: 41%;
    }
    #firm-links {
      width: 41%;
      float: right;
    }
    #firm-logo {
      clear: both;
      width: auto;
      float: none;
    }
  }

  /* screenwitdh <= 600px */
  @media screen and (max-width: 600px) {
    #containter {
      height: 680px;
    }
    ...
  }
</style>
<div id="footer">
  <div id="display">
    <div id="containter">
      <div id="firm-contact">
        <p>Streer</p>
        <p>Place</p>
        <p>+tel</p>
      </div>
      <div id="firm-links">
      <p><span>Links</span><</p>
        <p><<a href="#">Something</a></p>
        <p><a href="#">Other</a></p>
      </div>
      <div id="firm-logo">
       <div width="250" heigth="250">
         <img class="img-fluid" src="img/some.png" alt="Logo" width="75%">
       </div>
      </div>
    </div> <!-- containter -->
  </div> <!-- display -->
</div> <!-- footer -->