    {% highlight 'css' %}
    .sm-show, .md-show, .lg-show {
      display: none !important
    }
    @media (--breakpoint-sm) {
      .sm-show { display: block !important }
    }
    @media (--breakpoint-md) {
      .md-show { display: block !important }
    }
    @media (--breakpoint-lg) {
      .lg-show { display: block !important }
    }
    @media (--breakpoint-sm) {
      .sm-hide { display: none !important }
    }
    @media (--breakpoint-md) {
      .md-hide { display: none !important }
    }
    @media (--breakpoint-lg) {
      .lg-hide { display: none !important }
    }
    .display-none { display: none !important }
    .hide {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
    }
    {% endhighlight %}