Applying CSS to Polymer custom element with iron-media-query

I'm trying to achieve a simple 'media-query' behavior on my custom element using <iron-media-query> from the Polymer API. Assume i have a container with some text on top the top, and below it is the main content.. My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles. I just can't make it work. Is there something i completely missed here ? <link rel="import" href="../../bower_components/polymer/polymer.html"/> <link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" /> <iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query> <template is="dom-if" if="{{isMobilePhone}}"> <style> #title { color: #000000; font-size: 1.8em; } </style> </template> <template> <style> :host { background-color: gray; flex-direction: column; margin: auto; margin-top: 40px; display: flex; width: 90%; flex-grow: 1; max-width: 1300px; } #title { color: #7DB8C9; font-size: 1.3em; } .content-wrapper { height: 100%; } </style> <p id="title"> [[title]] </p> <div class="content-wrapper"> <content select=".content"></content> </div> </template> <script> Polymer({ is: 'content-container', properties: { title: String, isMobilePhone: Boolean }, listeners: { 'tap': 'spit' }, spit: function() { console.log("BOOL: " + this.isMobilePhone); } }); </script> </dom-module> I also tried copying the whole template ( with styles and markup ) inside the 'if' template and just modify the styles i want, but it doesn't work either. (Everything is inside the same file, which is content-container.html)