title: Responsive width for Card
body: <p>My component looks like this:</p>
  <pre><code>&lt;Card&gt;
      &lt;CardMedia&gt;
          &lt;img src=&quot;http://images.memes.com/character/meme/evil-toddler&quot;/&gt;
      &lt;/CardMedia&gt;
  &lt;/Card&gt;
  </code></pre>
  <p>I have noticed that the image uses almost 100% of the width of the page, which is undesirable in my situation.</p>
  <p>What I would like to do is define the width of the image (or the <code>Card</code> if possible) to depend on the DPI / resolution of the screen, using something like CSS's <em>@media</em>.</p>
  <p>For example, if DPI &gt; 720dp, the card should occupy the 60% of the screen, else 90%. Something like that.</p>
  <p>I tried with a custom CSS but it doesn't work because the library uses inline CSS and it overwrites my attributes.</p>