<div class="sizes">
  <VariableItem
    :variable-name="'--ads-sizes-1'"
    :variable-value="'0.25rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-1)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-2'"
    :variable-value="'0.5rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-2)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-3'"
    :variable-value="'0.75rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-3)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-4'"
    :variable-value="'1rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-4)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-5'"
    :variable-value="'1.25rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-5)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-6'"
    :variable-value="'1.5rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-6)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-7'"
    :variable-value="'1.75rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-7)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-8'"
    :variable-value="'2rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-8)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-9'"
    :variable-value="'2.25rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-9)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-10'"
    :variable-value="'2.5rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-10)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-12'"
    :variable-value="'3rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-12)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-14'"
    :variable-value="'3.5rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-14)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-16'"
    :variable-value="'4rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-16)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-20'"
    :variable-value="'5rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-20)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-24'"
    :variable-value="'6rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-24)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-28'"
    :variable-value="'7rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-28)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-32'"
    :variable-value="'8rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-32)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-36'"
    :variable-value="'9rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-36)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-40'"
    :variable-value="'10rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-40)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-44'"
    :variable-value="'11rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-44)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-48'"
    :variable-value="'12rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-48)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-52'"
    :variable-value="'13rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-52)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-56'"
    :variable-value="'14rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-56)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-60'"
    :variable-value="'15rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-60)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-64'"
    :variable-value="'16rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-64)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-72'"
    :variable-value="'18rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-72)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-80'"
    :variable-value="'20rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-80)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-96'"
    :variable-value="'24rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-96)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-px'"
    :variable-value="'1px'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-px)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-0-5'"
    :variable-value="'0.125rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-0-5)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-1-5'"
    :variable-value="'0.375rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-1-5)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-2-5'"
    :variable-value="'0.625rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-2-5)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-3-5'"
    :variable-value="'0.875rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-3-5)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-max'"
    :variable-value="'max-content'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-max)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-min'"
    :variable-value="'min-content'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-min)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-full'"
    :variable-value="'100%'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-full)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-3xs'"
    :variable-value="'14rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-3xs)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-2xs'"
    :variable-value="'16rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-2xs)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-xs'"
    :variable-value="'20rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-xs)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-sm'"
    :variable-value="'24rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-sm)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-md'"
    :variable-value="'28rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-md)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-lg'"
    :variable-value="'32rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-lg)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-xl'"
    :variable-value="'36rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-2xl'"
    :variable-value="'42rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-2xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-3xl'"
    :variable-value="'48rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-3xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-4xl'"
    :variable-value="'56rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-4xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-5xl'"
    :variable-value="'64rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-5xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-6xl'"
    :variable-value="'72rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-6xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-7xl'"
    :variable-value="'80rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-7xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-8xl'"
    :variable-value="'90rem'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-8xl)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-prose'"
    :variable-value="'60ch'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-prose)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-container-sm'"
    :variable-value="'640px'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-container-sm)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-container-md'"
    :variable-value="'768px'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-container-md)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-container-lg'"
    :variable-value="'1024px'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-container-lg)',
      }"
    />
  </VariableItem>
  <VariableItem
    :variable-name="'--ads-sizes-container-xl'"
    :variable-value="'1280px'"
  >
    <div
      class="sizes__rectangle"
      :style="{
        width: 'var(--ads-sizes-container-xl)',
      }"
    />
  </VariableItem>
</div>