export const mediaQueriesUsage = `
<h1>MEDIA QUERIES USAGE</h1>
<p style="width:70%;">
    OnNot so long ago, there was quite a hot debate about where media queries should be written: do
    they belong within selectors (as Sass allows it) or strictly dissociated from them? I have to say I am a fervent
    defender of the media-queries-within-selectors system, as I think it plays well with the ideas of components.
</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo {{'{'}}
    color: red;

    @include respond-to('medium') {{'{'}}
      color: blue;
    {{'}'}}
  {{'}'}}
</pre>
</div>
<p style="width:70%;">
    Leading to the following CSS output:
</p>
ss
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo {{'{'}}
    color: red;
  {{'}'}}

  @media (min-width: 800px) {{'{'}}
    .foo {{'{'}}
      color: blue;
    {{'}'}}
  {{'}'}}
    </pre>
</div>
`;
