:root {
  @media (min-width: 40em) {
    --font-size-base: 11px;
  }

  @media (min-width: 60em) {
    --font-size-xxx-small: 1.1rem;
    --font-size-xx-small: 1.2rem;
    --font-size-x-small: 1.4rem;
    --font-size-small: 1.6rem;
    --font-size-medium: 1.8rem;
    --font-size-large: 2rem;
    --font-size-x-large: 2.8rem;
    --font-size-xx-large: 4rem;
  }
}

.txt--xxx-small\@desktop { font-size: var(--font-size-xxx-small); }
.txt--xx-small\@desktop { font-size: var(--font-size-xx-small); }
.txt--x-small\@desktop { font-size: var(--font-size-x-small); }
.txt--small\@desktop { font-size: var(--font-size-small); }
.txt--medium\@desktop { font-size: var(--font-size-medium); }
.txt--large\@desktop { font-size: var(--font-size-large); }
.txt--x-large\@desktop { font-size: var(--font-size-x-large); }
.txt--xx-large\@desktop { font-size: var(--font-size-xx-large); }

.txt--transform-none\@desktop { text-transform: none; }