Responsive Outlook mail footer with CSS - html

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><Something</p>
<p>Other</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 -->