<template x-if="isLoading">
  <div class="flex flex-col gap-12 py-12">
    <div class="flex flex-col ltablet:flex-row lg:flex-row gap-6 -m-3">
      <!--Column-->
      <div class="w-full ltablet:w-2/3 lg:w-2/3">
        <!--Featured article-->
        <a
          class="
            h-full
            grid
            md:grid-cols-2
            rounded-xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            w-full
            max-w-4xl
            mx-auto
            overflow-hidden
          "
        >
          <!--Article image-->
          <div class="h-full p-5">
            <div
              class="
                w-full
                h-full
                aspect-square
                rounded-xl
                placeload
                animate-placeload
              "
            ></div>
          </div>
          <!--Article content-->
          <div
            class="
              flex flex-col
              items-start
              gap-4
              px-6
              md:px-10
              py-8
              -mt-8
              md:mt-0 md:-ml-5
            "
          >
            <div class="w-full space-y-4 mb-6">
              <!--Badge-->
              <span
                class="
                  inline-block
                  font-sans
                  text-xs
                  py-1.5
                  px-3
                  m-1
                  rounded-lg
                  placeload
                  animate-placeload
                "
              >
                Business
              </span>
              <div class="space-y-2">
                <div
                  class="h-5 w-full rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-5 w-3/4 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-5 w-1/2 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>

            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="space-y-2">
                <div
                  class="h-4 w-full rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/4 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-1/2 rounded placeload animate-placeload"
                ></div>
              </div>
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Column-->
      <div class="w-full ltablet:w-1/3 lg:w-1/3">
        <!--Featured article-->
        <a
          href="/post.html"
          class="
            block
            h-full
            rounded-xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            w-full
            max-w-4xl
            mx-auto
            overflow-hidden
          "
        >
          <!--Article content-->
          <div
            class="
              flex flex-col
              items-start
              gap-4
              px-6
              md:px-10
              py-8
              -mt-8
              md:mt-0 md:-ml-5
            "
          >
            <div class="w-full space-y-4 mb-6">
              <!--Badge-->
              <span
                class="
                  inline-block
                  font-sans
                  text-xs
                  py-1.5
                  px-3
                  m-1
                  rounded-lg
                  placeload
                  animate-placeload
                "
              >
                Business
              </span>
              <div class="space-y-2">
                <div
                  class="h-5 w-full rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-5 w-3/4 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-5 w-1/2 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>

            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="space-y-2">
                <div
                  class="h-4 w-full rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/4 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-1/2 rounded placeload animate-placeload"
                ></div>
              </div>
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>

    <!--Articles grid-->
    <div
      class="
        grid
        ptablet:grid-cols-2
        ltablet:grid-cols-3
        lg:grid-cols-3
        gap-6
        -m-3
      "
    >
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!--Article-->
      <div class="relative">
        <a
          href="/post.html"
          class="
            block
            h-full
            w-full
            rounded-2xl
            bg-white
            dark:bg-muted-800
            border border-muted-200
            dark:border-muted-700
            overflow-hidden
          "
        >
          <div class="h-full flex flex-col items-start gap-4 p-6">
            <!--Article content-->
            <div class="relative w-full space-y-4">
              <!--Article image-->
              <div class="relative">
                <!--Featured image-->
                <div
                  class="
                    w-full
                    h-52
                    object-cover
                    rounded-xl
                    placeload
                    animate-placeload
                  "
                ></div>
              </div>
              <!--Title-->
              <div class="space-y-2">
                <div
                  class="h-4 w-4/5 rounded placeload animate-placeload"
                ></div>
                <div
                  class="h-4 w-3/5 rounded placeload animate-placeload"
                ></div>
              </div>
            </div>
            <!--Article meta-->
            <div class="w-full mt-auto space-y-6">
              <div class="flex items-center justify-start w-full relative">
                <div
                  class="h-12 w-12 mask mask-blob placeload animate-placeload"
                ></div>
                <div class="pl-2 space-y-1">
                  <div
                    class="h-4 w-20 rounded placeload animate-placeload"
                  ></div>
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
                <div class="block ml-auto">
                  <div
                    class="h-4 w-16 rounded placeload animate-placeload"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>

    <!--Load more-->
    <div class="w-full flex items-center justify-center p-6 -m-3"></div>
  </div>
</template>
