<script setup lang="ts">
import './css-utopia-space.styl'
</script>

<template>
  <div class="_utopia_space">
    <div class="_space _space-3xs">
      <div class="left">
        space
      </div>
      <div class="right">
        space-3xs
      </div>
    </div>
    <div class="_space _space-2xs">
      <div class="left">
        space
      </div>
      <div class="right">
        space-2xs
      </div>
    </div>
    <div class="_space _space-xs">
      <div class="left">
        space
      </div>
      <div class="right">
        space-xs
      </div>
    </div>
    <div class="_space _space-s">
      <div class="left">
        space
      </div>
      <div class="right">
        space-s
      </div>
    </div>
    <div class="_space _space-m">
      <div class="left">
        space
      </div>
      <div class="right">
        space-m
      </div>
    </div>
    <div class="_space _space-l">
      <div class="left">
        space
      </div>
      <div class="right">
        space-l
      </div>
    </div>
    <div class="_space _space-xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-xl
      </div>
    </div>
    <div class="_space _space-2xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-2xl
      </div>
    </div>
    <div class="_space _space-3xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-3xl
      </div>
    </div>
    <div class="_space _space-3xs-2xs">
      <div class="left">
        space
      </div>
      <div class="right">
        space-3xs-2xs
      </div>
    </div>
    <div class="_space _space-2xs-xs">
      <div class="left">
        space
      </div>
      <div class="right">
        space-2xs-xs
      </div>
    </div>
    <div class="_space _space-xs-s">
      <div class="left">
        space
      </div>
      <div class="right">
        space-xs-s
      </div>
    </div>
    <div class="_space _space-s-m">
      <div class="left">
        space
      </div>
      <div class="right">
        space-s-m
      </div>
    </div>
    <div class="_space _space-m-l">
      <div class="left">
        space
      </div>
      <div class="right">
        space-m-l
      </div>
    </div>
    <div class="_space _space-l-xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-l-xl
      </div>
    </div>
    <div class="_space _space-xl-2xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-xl-2xl
      </div>
    </div>
    <div class="_space _space-2xl-3xl">
      <div class="left">
        space
      </div>
      <div class="right">
        space-2xl-3xl
      </div>
    </div>
    <div class="_space _space-s-l">
      <div class="left">
        space
      </div>
      <div class="right">
        space-s-l
      </div>
    </div>

    <div class="_font--2">
      _font--2
    </div>

    <div class="_font--1">
      _font--1
    </div>

    <div class="_font-0">
      _font-0
    </div>

    <div class="_font-1">
      _font-1
    </div>

    <div class="_font-2">
      _font-2
    </div>

    <div class="_font-3">
      _font-3
    </div>

    <div class="_font-4">
      _font-4
    </div>

    <div class="_font-5">
      _font-5
    </div>
  </div>
</template>
