Pagination

<!-- Default -->
<nav class="flex gap-12px md:gap-32px lg:gap-64px justify-between items-center overflow-auto">
  <a href="#"
    class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground">
    <svg width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path d="M10 3L5 8L10 13"
        stroke="currentColor"
        stroke-width="1.5"/>
    </svg>
    Previous
  </a>
  <ul class="flex gap-12px">
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            1
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-foreground bg-foreground text-background">
            2
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            3
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            4
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            5
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            6
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            7
          </a>
      </li>
  </ul>
  <a href="#"
    class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground">
    Next
    <svg width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path d="M6 13L11 8L6 3"
        stroke="currentColor"
        stroke-width="1.5"/>
    </svg>
  </a>
</nav>

<!-- Short -->
<nav class="flex gap-12px md:gap-20px items-center">
  <a href="#"
    class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground">
    <svg width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path d="M10 3L5 8L10 13"
        stroke="currentColor"
        stroke-width="1.5"/>
    </svg>
  </a>
  <ul class="flex gap-12px items-center">
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            1
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-foreground bg-foreground text-background">
            2
          </a>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            3
          </a>
      </li>
      <li class="flex gap-4px">
        <div class="flex gap-4px">
          <div class="w-4px h-4px bg-black-200"></div>
          <div class="w-4px h-4px bg-black-200"></div>
          <div class="w-4px h-4px bg-black-200"></div>
        </div>
      </li>
      <li class="flex">
        <a href="#"
            class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-transparent hover:border-foreground active:border-foreground">
            7
          </a>
      </li>
  </ul>
  <a href="#"
    class="flex items-center no-underline py-4px px-16px rounded-8px gap-4px text-btn3 text-foreground border border-transparent hover:border-foreground active:border-foreground">
    <svg width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path d="M6 13L11 8L6 3"
        stroke="currentColor"
        stroke-width="1.5"/>
    </svg>
  </a>
</nav>