Pagination

<nav class="flex gap-12px md:gap-32px lg:gap-64px justify-between items-center overflow-auto">
  <a
    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"
    href="#">
    <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">
      </path>
    </svg>
    Previous
  </a>
  <ul class="flex gap-12px">
    <li class="flex">
      <a
        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"
        href="#">
        1
      </a>
    </li>
    <li class="flex">
      <a
        class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-foreground bg-foreground text-background"
        href="#">
        2
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        3
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        4
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        5
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        6
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        7
      </a>
    </li>
  </ul>
  <a
    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"
    href="#">
    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">
      </path>
    </svg>
  </a>
</nav>

<nav class="flex gap-12px md:gap-20px items-center">
  <a
    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"
    href="#">
    <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">
      </path>
    </svg>
  </a>
  <ul class="flex gap-12px items-center">
    <li class="flex">
      <a
        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"
        href="#">
        1
      </a>
    </li>
    <li class="flex">
      <a
        class="flex w-32px h-32px items-center justify-center no-underline text-btn3 rounded-8px border border-foreground bg-foreground text-background"
        href="#">
        2
      </a>
    </li>
    <li class="flex">
      <a
        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"
        href="#">
        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
        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"
        href="#">
        7
      </a>
    </li>
  </ul>
  <a
    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"
    href="#">
    <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">
      </path>
    </svg>
  </a>
</nav>