title: Change font size in Vuetify based on viewport?
body: <p>I have a title:</p>
  
  <pre><code>&lt;v-card-text style="font-size:5em"&gt;
      Some Heading Here
  &lt;/v-card-text&gt;
  </code></pre>
  
  <p>I would like to set font size to 3em when the view is XS.
  Right now I duplicated it as follows:</p>
  
  <pre><code>&lt;v-card-text hidden-xs-only style="font-size:5em"&gt;
      Some Heading Here
  &lt;/v-card-text&gt;
  &lt;v-card-text visible-xs-only style="font-size:3em"&gt;
      Some Heading Here
  &lt;/v-card-text&gt;
  </code></pre>
  
  <p>However I would like to avoid this duplication and solve the issue with <strong>CSS alone</strong>, but without having to write my own <code>@media</code> queries in the local .vue file. Is that possible?</p>
  
  <p>Alternatively, I'm ok with using predefined classes instead of specifying font size directly or even different elements completely, e.g. something like <code>&lt;h3&gt;</code> when it's XS but <code>&lt;h2&gt;</code> on other viewports.</p>