feed.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Feed | PIXL</title>
  </head>
  <body
    class="max-w-[1800px] mx-auto relative h-dvh overflow-clip bg-pixl-dark flex pt-4 md:px-4 xl:px-6 xl:pt-6 pb-0 gap-6 md:gap-10 lg:gap-12 xl:gap-16 text-pixl-light justify-end"
  >
    <!-- ----------------------------- -->
    <!-- Left sidebar (header) -->
    <!-- ----------------------------- -->
    <header class="pl-4 md:pl-0 hidden sm:flex justify-end xl:ml-24 2xl:ml-50">
      <div class="w-32 md:w-40">
        <a href="/" aria-label="PIXL">
          <svg class="h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 182 61" fill="none">
            <path
              fill="#EEE"
              d="M10.083 0H0v10.083h10.083V0Zm10.084 0H10.084v10.083h10.083V0Z"
            ></path>
            <path
              fill="#EEE"
              d="M30.25 0H20.165v10.083h10.083V0ZM10.083 10.083H0v10.084h10.083V10.083Zm30.25 0H30.25v10.084h10.083V10.083Zm-30.25 10.084H0V30.25h10.083V20.167Zm30.25 0H30.25V30.25h10.083V20.167ZM10.083 30.25H0v10.083h10.083V30.25Zm10.084 0H10.084v10.083h10.083V30.25Z"
            ></path>
            <path
              fill="#EEE"
              d="M30.25 30.25H20.165v10.083h10.083V30.25ZM10.083 40.333H0v10.084h10.083V40.333Zm0 10.084H0V60.5h10.083V50.417ZM60.5 0H50.415v10.083h10.083V0Zm10.083 0H60.5v10.083h10.083V0Zm10.084 0H70.584v10.083h10.083V0ZM70.583 10.083H60.5v10.084h10.083V10.083Zm0 10.084H60.5V30.25h10.083V20.167Zm0 10.083H60.5v10.083h10.083V30.25Zm0 10.083H60.5v10.084h10.083V40.333Zm0 10.084H60.5V60.5h10.083V50.417ZM60.5 50.416H50.415V60.5h10.083V50.416Zm20.167 0H70.584V60.5h10.083V50.416Z"
            ></path>
            <path
              fill="#ECA749"
              d="M100.833 0H90.75v10.083h10.083V0Zm0 10.083H90.75v10.084h10.083V10.083ZM131.083 0H121v10.083h10.083V0Zm0 10.083H121v10.084h10.083V10.083Zm-30.25 30.25H90.75v10.084h10.083V40.333Zm0 10.084H90.75V60.5h10.083V50.417Zm30.25-10.084H121v10.084h10.083V40.333Zm0 10.084H121V60.5h10.083V50.417ZM110.917 30.25h-10.083v10.083h10.083V30.25Zm10.082-10.084h-10.083V30.25h10.083V20.166Z"
            ></path>
            <path
              fill="#ECA749"
              d="M110.917 20.166h-10.083V30.25h10.083V20.166Zm10.082 10.084h-10.083v10.083h10.083V30.25Z"
            ></path>
            <path
              fill="#EEE"
              d="M151.249 0h-10.083v10.083h10.083V0Zm0 10.084h-10.083v10.083h10.083V10.083Z"
            ></path>
            <path
              fill="#EEE"
              d="M151.249 20.166h-10.083V30.25h10.083V20.166Zm0 10.084h-10.083v10.083h10.083V30.25Zm0 10.084h-10.083v10.083h10.083V40.333Z"
            ></path>
            <path
              fill="#EEE"
              d="M151.249 50.416h-10.083V60.5h10.083V50.416Zm10.084.001H151.25V60.5h10.083V50.417Zm10.084-.001h-10.083V60.5h10.083V50.416Z"
            ></path>
            <path fill="#EEE" d="M181.499 50.416h-10.083V60.5h10.083V50.416Z"></path>
          </svg>
        </a>
        <nav class="mt-8">
          <ul class="flex flex-col gap-2 text-sm md:text-lg">
            <li><a href="#" class="hover:underline">Home</a></li>
            <li><a href="#" class="hover:underline">Explore</a></li>
            <li><a href="#" class="hover:underline">Notifications</a></li>
            <li><a href="#" class="hover:underline">Lists</a></li>
            <li><a href="#" class="hover:underline">Bookmarks</a></li>
            <li><a href="#" class="hover:underline">Jobs</a></li>
            <li><a href="#" class="hover:underline">Communities</a></li>
            <li><a href="#" class="hover:underline">Premium</a></li>
            <li><a href="#" class="hover:underline">Profile</a></li>
            <li><a href="#" class="hover:underline">More</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- ----------------------------- -->
    <!-- Main column -->
    <!-- ----------------------------- -->
    <div class="flex-1 flex flex-col">
      <nav class="px-4">
        <ul class="flex justify-end gap-8 text-sm py-1">
          <li><a href="#" class="hover:underline">For you</a></li>
          <li><a href="#" class="hover:underline">Idea Streams</a></li>
          <li><a href="#" class="hover:underline">Following</a></li>
        </ul>
      </nav>
      <main class="overflow-y-auto py-8 px-4">
        <!-- ----------------------------- --><!-- Post prompt --><!-- ----------------------------- -->
        <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
          <a href="/profile">
            <img src="/images/adrian.png" class="size-10 md:size-12 object-cover" alt="" />
          </a>
          <div class="flex-1">
            <textarea
              class="-m-2 p-2 min-h-24 text-lg w-full bg-transparent text-pixl-highlight placeholder-pixl-light/50 field-sizing-content resize-none"
              placeholder="What's up _adrian?"
            ></textarea>
            <!-- Action buttons -->
            <div class="flex items-center justify-between">
              <div class="flex gap-5">
                <button>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="19" fill="none">
                    <g fill="#EEE" clip-path="url(#a)">
                      <path
                        d="M1.91 1.579H.332v1.577H1.91V1.58ZM3.486 0H1.908v1.578h1.578V0Zm1.578 0H3.486v1.578h1.578V0Zm1.58 0H5.066v1.578h1.578V0Zm1.578 0H6.645v1.578h1.577V0Z"
                      ></path>
                      <path d="M9.798 0H8.221v1.578h1.577V0Zm1.579 0H9.799v1.578h1.578V0Z"></path>
                      <path d="M12.95 0h-1.577v1.578h1.578V0Zm1.585 0h-1.578v1.578h1.578V0Z"></path>
                      <path d="M16.111 0h-1.578v1.578h1.578V0Z"></path>
                      <path
                        d="M17.69 0h-1.58v1.578h1.578V0ZM3.486 12.623H1.908v1.578h1.578v-1.578Zm1.578-1.578H3.486v1.578h1.578v-1.578Zm1.58-1.578H5.066v1.578h1.578V9.467Zm1.578 1.578H6.645v1.578h1.577v-1.578Zm1.576 1.578H8.221v1.578h1.577v-1.578Zm1.579-1.578H9.799v1.578h1.578v-1.578Zm1.573-1.578h-1.577v1.578h1.578V9.467Zm1.585-1.577h-1.578v1.577h1.578V7.889Zm1.576-1.579h-1.578v1.578h1.578V6.31ZM17.69 7.89h-1.58v1.577h1.578V7.889Zm1.573 1.577h-1.578v1.578h1.578V9.467Zm1.578 1.578h-1.577v1.578h1.577v-1.578Zm1.583 1.578h-1.578v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M19.263 0h-1.578v1.578h1.578V0Zm1.578 0h-1.577v1.578h1.577V0Zm1.583 0h-1.578v1.578h1.578V0ZM1.91 3.157H.332v1.578H1.91V3.157Zm0 1.578H.332v1.578H1.91V4.735Z"
                      ></path>
                      <path
                        d="M1.91 6.311H.332v1.578H1.91V6.31Zm0 1.579H.332v1.577H1.91V7.889Zm0 1.577H.332v1.578H1.91V9.467Zm0 1.578H.332v1.578H1.91v-1.578Zm0 1.578H.332v1.578H1.91v-1.578Z"
                      ></path>
                      <path
                        d="M1.91 14.2H.332v1.578H1.91V14.2Zm0 1.579H.332v1.577H1.91V15.78Zm22.092-14.2h-1.578v1.577h1.578V1.58Zm0 1.578h-1.578v1.578h1.578V3.157Zm0 1.578h-1.578v1.578h1.578V4.735Z"
                      ></path>
                      <path
                        d="M24.002 6.311h-1.578v1.578h1.578V6.31Zm0 1.579h-1.578v1.577h1.578V7.889Zm0 1.577h-1.578v1.578h1.578V9.467Zm0 1.578h-1.578v1.578h1.578v-1.578Zm0 1.578h-1.578v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M24.002 14.2h-1.578v1.578h1.578V14.2Zm0 1.578h-1.578v1.578h1.578v-1.578ZM3.486 17.356H1.908v1.578h1.578v-1.578Zm1.578 0H3.486v1.578h1.578v-1.578Zm1.58.001H5.066v1.578h1.578v-1.578Zm1.578 0H6.645v1.578h1.577v-1.578Z"
                      ></path>
                      <path
                        d="M9.798 17.356H8.221v1.578h1.577v-1.578Zm1.579 0H9.799v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M12.95 17.356h-1.577v1.578h1.578v-1.578Zm1.585.001h-1.578v1.578h1.578v-1.578Z"
                      ></path>
                      <path d="M16.111 17.356h-1.578v1.578h1.578v-1.578Z"></path>
                      <path d="M17.69 17.356h-1.58v1.578h1.578v-1.578Z"></path>
                      <path
                        d="M19.263 17.356h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.577v1.578h1.577v-1.578Zm1.583 0h-1.578v1.578h1.578v-1.578ZM8.222 4.735H6.645v1.578h1.577V4.735Zm1.576-1.578H8.221v1.578h1.577V3.157Zm1.579 1.578H9.799v1.578h1.578V4.735Z"
                      ></path>
                      <path d="M9.798 6.311H8.221v1.578h1.577V6.31Z"></path>
                    </g>
                    <defs>
                      <clipPath id="a">
                        <path fill="#fff" d="M.334 0h23.667v18.933H.334z"></path>
                      </clipPath>
                    </defs>
                  </svg>
                </button>
                <button>
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="19" fill="none">
                    <g fill="#EEE" clip-path="url(#a)">
                      <path
                        d="M2.246 1.579H.668v1.577h1.578V1.58ZM3.824 0H2.246v1.578h1.578V0Zm1.578 0H3.824v1.578h1.578V0ZM6.98 0H5.402v1.578H6.98V0Zm1.576 0H6.98v1.578h1.577V0Zm1.578 0H8.557v1.578h1.577V0Zm1.579 0h-1.578v1.578h1.578V0Zm1.577 0h-1.577v1.578h1.578V0Z"
                      ></path>
                      <path
                        d="M14.869 0H13.29v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Z"
                      ></path>
                      <path
                        d="M21.177 0H19.6v1.578h1.577V0Zm1.579 0h-1.578v1.578h1.578V0ZM2.246 3.156H.668v1.578h1.578V3.156Zm0 1.578H.668v1.578h1.578V4.734Zm0 1.578H.668V7.89h1.578V6.312Zm0 1.578H.668v1.578h1.578V7.89Z"
                      ></path>
                      <path
                        d="M2.246 9.467H.668v1.578h1.578V9.467Zm0 1.578H.668v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M2.246 12.623H.668V14.2h1.578v-1.578Zm0 1.577H.668v1.578h1.578V14.2Zm0 1.579H.668v1.577h1.578V15.78Zm22.088-14.2h-1.578v1.577h1.578V1.58Zm0 1.577h-1.578v1.578h1.578V3.156Zm0 1.578h-1.578v1.578h1.578V4.734Zm0 1.578h-1.578v1.577h1.578V6.312Zm0 1.578h-1.578v1.577h1.578V7.89Zm0 1.577h-1.578v1.578h1.578V9.467Zm0 1.578h-1.578v1.578h1.578v-1.578Zm0 1.578h-1.578v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M24.334 14.2h-1.578v1.578h1.578V14.2Zm0 1.578h-1.578v1.578h1.578v-1.578Zm-20.51 1.578H2.246v1.578h1.578v-1.578Zm1.578 0H3.824v1.578h1.578v-1.578Zm1.578 0H5.402v1.578H6.98v-1.578Zm1.576 0H6.98v1.578h1.577v-1.578Zm1.578 0H8.557v1.578h1.577v-1.578Zm1.579 0h-1.578v1.578h1.578v-1.578Zm1.577 0h-1.577v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M14.869 17.356H13.29v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Z"
                      ></path>
                      <path
                        d="M21.177 17.356H19.6v1.578h1.577v-1.578Zm1.579 0h-1.578v1.578h1.578v-1.578Zm-11.043-14.2h-1.578v1.578h1.578V3.156Zm-1.579 1.578H8.557v1.578h1.577V4.734Zm0 1.578H8.557v1.577h1.577V6.312Zm0 1.578H8.557v1.577h1.577V7.89Zm0 1.577H8.557v1.578h1.577V9.467Zm0 1.578H8.557v1.578h1.577v-1.578Zm0 1.578H8.557v1.578h1.577v-1.578Zm1.579 1.577h-1.578v1.578h1.578V14.2Zm6.312-6.31h-1.578v1.577h1.578V7.89Zm0 1.577h-1.578v1.578h1.578V9.467Zm-1.578-3.155h-1.578v1.577h1.578V6.312Zm-1.578-1.578H13.29v1.578h1.578V4.734ZM13.29 3.156h-1.577v1.578h1.578V3.156Zm3.157 7.889h-1.578v1.578h1.578v-1.578Zm-1.578 1.578H13.29v1.578h1.578v-1.578Z"
                      ></path>
                      <path d="M13.29 14.2h-1.577v1.578h1.578V14.2Z"></path>
                    </g>
                    <defs>
                      <clipPath id="a">
                        <path fill="#fff" d="M.666 0h23.667v18.933H.666z"></path>
                      </clipPath>
                    </defs>
                  </svg>
                </button>
              </div>
              <button class="bg-pixl-highlight text-sm text-pixl-dark px-4 py-1">Post</button>
            </div>
          </div>
        </div>
        <hr class="border-pixl-light/10 mt-3" />
        <!-- ----------------------------- -->
        <!-- Feed -->
        <!-- ----------------------------- -->
        <ol class="mt-4">
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img
                  src="/images/simon-chilling.png"
                  class="size-10 md:size-12 object-cover"
                  alt=""
                />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Simon </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@simonswiss</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>Whoaaaa, this is pretty cool, seriously.</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
                <div>
                  <hr class="border-pixl-light/10 h-px mt-4" />
                  <div
                    class="flex flex-col min-[400px]:flex-row gap-4 items-start bg-pixl-light/5 p-4 border-t border-pixl-light/10"
                  >
                    <a href="/profile">
                      <img
                        src="/images/adrian.png"
                        class="size-10 md:size-12 object-cover"
                        alt=""
                      />
                    </a>
                    <div class="flex-1">
                      <textarea
                        class="-m-2 p-2 min-h-24 text-sm w-full bg-transparent text-pixl-highlight placeholder-pixl-light/50 field-sizing-content resize-none"
                        placeholder="Reply to Simon's post"
                      ></textarea>
                      <!-- Action buttons -->
                      <div class="flex items-center justify-between">
                        <div class="flex gap-5">
                          <button>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="24"
                              height="19"
                              fill="none"
                            >
                              <g fill="#EEE" clip-path="url(#a)">
                                <path
                                  d="M1.91 1.579H.332v1.577H1.91V1.58ZM3.486 0H1.908v1.578h1.578V0Zm1.578 0H3.486v1.578h1.578V0Zm1.58 0H5.066v1.578h1.578V0Zm1.578 0H6.645v1.578h1.577V0Z"
                                ></path>
                                <path
                                  d="M9.798 0H8.221v1.578h1.577V0Zm1.579 0H9.799v1.578h1.578V0Z"
                                ></path>
                                <path
                                  d="M12.95 0h-1.577v1.578h1.578V0Zm1.585 0h-1.578v1.578h1.578V0Z"
                                ></path>
                                <path d="M16.111 0h-1.578v1.578h1.578V0Z"></path>
                                <path
                                  d="M17.69 0h-1.58v1.578h1.578V0ZM3.486 12.623H1.908v1.578h1.578v-1.578Zm1.578-1.578H3.486v1.578h1.578v-1.578Zm1.58-1.578H5.066v1.578h1.578V9.467Zm1.578 1.578H6.645v1.578h1.577v-1.578Zm1.576 1.578H8.221v1.578h1.577v-1.578Zm1.579-1.578H9.799v1.578h1.578v-1.578Zm1.573-1.578h-1.577v1.578h1.578V9.467Zm1.585-1.577h-1.578v1.577h1.578V7.889Zm1.576-1.579h-1.578v1.578h1.578V6.31ZM17.69 7.89h-1.58v1.577h1.578V7.889Zm1.573 1.577h-1.578v1.578h1.578V9.467Zm1.578 1.578h-1.577v1.578h1.577v-1.578Zm1.583 1.578h-1.578v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M19.263 0h-1.578v1.578h1.578V0Zm1.578 0h-1.577v1.578h1.577V0Zm1.583 0h-1.578v1.578h1.578V0ZM1.91 3.157H.332v1.578H1.91V3.157Zm0 1.578H.332v1.578H1.91V4.735Z"
                                ></path>
                                <path
                                  d="M1.91 6.311H.332v1.578H1.91V6.31Zm0 1.579H.332v1.577H1.91V7.889Zm0 1.577H.332v1.578H1.91V9.467Zm0 1.578H.332v1.578H1.91v-1.578Zm0 1.578H.332v1.578H1.91v-1.578Z"
                                ></path>
                                <path
                                  d="M1.91 14.2H.332v1.578H1.91V14.2Zm0 1.579H.332v1.577H1.91V15.78Zm22.092-14.2h-1.578v1.577h1.578V1.58Zm0 1.578h-1.578v1.578h1.578V3.157Zm0 1.578h-1.578v1.578h1.578V4.735Z"
                                ></path>
                                <path
                                  d="M24.002 6.311h-1.578v1.578h1.578V6.31Zm0 1.579h-1.578v1.577h1.578V7.889Zm0 1.577h-1.578v1.578h1.578V9.467Zm0 1.578h-1.578v1.578h1.578v-1.578Zm0 1.578h-1.578v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M24.002 14.2h-1.578v1.578h1.578V14.2Zm0 1.578h-1.578v1.578h1.578v-1.578ZM3.486 17.356H1.908v1.578h1.578v-1.578Zm1.578 0H3.486v1.578h1.578v-1.578Zm1.58.001H5.066v1.578h1.578v-1.578Zm1.578 0H6.645v1.578h1.577v-1.578Z"
                                ></path>
                                <path
                                  d="M9.798 17.356H8.221v1.578h1.577v-1.578Zm1.579 0H9.799v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M12.95 17.356h-1.577v1.578h1.578v-1.578Zm1.585.001h-1.578v1.578h1.578v-1.578Z"
                                ></path>
                                <path d="M16.111 17.356h-1.578v1.578h1.578v-1.578Z"></path>
                                <path d="M17.69 17.356h-1.58v1.578h1.578v-1.578Z"></path>
                                <path
                                  d="M19.263 17.356h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.577v1.578h1.577v-1.578Zm1.583 0h-1.578v1.578h1.578v-1.578ZM8.222 4.735H6.645v1.578h1.577V4.735Zm1.576-1.578H8.221v1.578h1.577V3.157Zm1.579 1.578H9.799v1.578h1.578V4.735Z"
                                ></path>
                                <path d="M9.798 6.311H8.221v1.578h1.577V6.31Z"></path>
                              </g>
                              <defs>
                                <clipPath id="a">
                                  <path fill="#fff" d="M.334 0h23.667v18.933H.334z"></path>
                                </clipPath>
                              </defs>
                            </svg>
                          </button>
                          <button>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="25"
                              height="19"
                              fill="none"
                            >
                              <g fill="#EEE" clip-path="url(#a)">
                                <path
                                  d="M2.246 1.579H.668v1.577h1.578V1.58ZM3.824 0H2.246v1.578h1.578V0Zm1.578 0H3.824v1.578h1.578V0ZM6.98 0H5.402v1.578H6.98V0Zm1.576 0H6.98v1.578h1.577V0Zm1.578 0H8.557v1.578h1.577V0Zm1.579 0h-1.578v1.578h1.578V0Zm1.577 0h-1.577v1.578h1.578V0Z"
                                ></path>
                                <path
                                  d="M14.869 0H13.29v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Zm1.578 0h-1.578v1.578h1.578V0Z"
                                ></path>
                                <path
                                  d="M21.177 0H19.6v1.578h1.577V0Zm1.579 0h-1.578v1.578h1.578V0ZM2.246 3.156H.668v1.578h1.578V3.156Zm0 1.578H.668v1.578h1.578V4.734Zm0 1.578H.668V7.89h1.578V6.312Zm0 1.578H.668v1.578h1.578V7.89Z"
                                ></path>
                                <path
                                  d="M2.246 9.467H.668v1.578h1.578V9.467Zm0 1.578H.668v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M2.246 12.623H.668V14.2h1.578v-1.578Zm0 1.577H.668v1.578h1.578V14.2Zm0 1.579H.668v1.577h1.578V15.78Zm22.088-14.2h-1.578v1.577h1.578V1.58Zm0 1.577h-1.578v1.578h1.578V3.156Zm0 1.578h-1.578v1.578h1.578V4.734Zm0 1.578h-1.578v1.577h1.578V6.312Zm0 1.578h-1.578v1.577h1.578V7.89Zm0 1.577h-1.578v1.578h1.578V9.467Zm0 1.578h-1.578v1.578h1.578v-1.578Zm0 1.578h-1.578v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M24.334 14.2h-1.578v1.578h1.578V14.2Zm0 1.578h-1.578v1.578h1.578v-1.578Zm-20.51 1.578H2.246v1.578h1.578v-1.578Zm1.578 0H3.824v1.578h1.578v-1.578Zm1.578 0H5.402v1.578H6.98v-1.578Zm1.576 0H6.98v1.578h1.577v-1.578Zm1.578 0H8.557v1.578h1.577v-1.578Zm1.579 0h-1.578v1.578h1.578v-1.578Zm1.577 0h-1.577v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M14.869 17.356H13.29v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Zm1.578 0h-1.578v1.578h1.578v-1.578Z"
                                ></path>
                                <path
                                  d="M21.177 17.356H19.6v1.578h1.577v-1.578Zm1.579 0h-1.578v1.578h1.578v-1.578Zm-11.043-14.2h-1.578v1.578h1.578V3.156Zm-1.579 1.578H8.557v1.578h1.577V4.734Zm0 1.578H8.557v1.577h1.577V6.312Zm0 1.578H8.557v1.577h1.577V7.89Zm0 1.577H8.557v1.578h1.577V9.467Zm0 1.578H8.557v1.578h1.577v-1.578Zm0 1.578H8.557v1.578h1.577v-1.578Zm1.579 1.577h-1.578v1.578h1.578V14.2Zm6.312-6.31h-1.578v1.577h1.578V7.89Zm0 1.577h-1.578v1.578h1.578V9.467Zm-1.578-3.155h-1.578v1.577h1.578V6.312Zm-1.578-1.578H13.29v1.578h1.578V4.734ZM13.29 3.156h-1.577v1.578h1.578V3.156Zm3.157 7.889h-1.578v1.578h1.578v-1.578Zm-1.578 1.578H13.29v1.578h1.578v-1.578Z"
                                ></path>
                                <path d="M13.29 14.2h-1.577v1.578h1.578V14.2Z"></path>
                              </g>
                              <defs>
                                <clipPath id="a">
                                  <path fill="#fff" d="M.666 0h23.667v18.933H.666z"></path>
                                </clipPath>
                              </defs>
                            </svg>
                          </button>
                        </div>
                        <button
                          class="bg-pixl-highlight/10 text-pixl-highlight text-sm hover:bg-pixl-highlight/20 px-4 py-1"
                        >
                          Post
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    Presumably, if you're watching this series, you've already made the decision to
                    embrace all that Laravel has to offer. However, if you're still on the fence,
                    give me just a moment to sell you on why I believe Laravel is the best framework
                    choice in the PHP world.
                  </p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/michael.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Michael </a></h2>
                    <p class="text-xs text-pixl-light/50">4h30</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@mmich_jj</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    I made this!
                    <a class="hover:underline text-pixl-highlight" href="#">#myartwork</a>
                    <a class="hover:underline text-pixl-highlight" href="#">#pixl</a>
                  </p>
                  <img src="/images/simon-chilling.png" alt="" />
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <ul class="relative mt-8 border-t border-pixl-light/10">
                  <li class="relative pt-8 group/li">
                    <!-- Line-through -->
                    <div
                      class="absolute top-0 w-10 md:w-12 grid place-items-center h-full group-last/li:h-8"
                      aria-hidden="true"
                    >
                      <div class="w-px h-full bg-pixl-light/10"></div>
                    </div>
                    <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
                      <a href="/profile" class="shrink-0">
                        <img
                          src="/images/simon-chilling.png"
                          class="size-10 md:size-12 object-cover"
                          alt=""
                        />
                      </a>
                      <div class="flex-1 border-b border-pixl-light/10 pb-8">
                        <div class="flex flex-wrap gap-3 items-center justify-between">
                          <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                            <h2><a href="/profile" class="hover:underline">Simon</a></h2>
                            <p class="text-xs text-pixl-light/50">45min</p>
                            <a
                              href="/profile"
                              class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                              >@simonswiss</a
                            >
                          </div>
                        </div>
                        <div class="text-sm mt-4 flex flex-col gap-3">
                          <p>Heh — that looks just like me :)</p>
                        </div>
                        <!-- Action buttons -->
                        <div
                          class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2"
                        >
                          <div class="flex gap-6">
                            <!-- Likes -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  class="-mt-0.5 size-4"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="none"
                                >
                                  <path
                                    fill="currentColor"
                                    d="M6.314 3.73H3.756v2.558h2.558V3.73Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                            <!-- Comments -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  aria-label="Comment icon"
                                  class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 16"
                                  fill="none"
                                >
                                  <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                                  ></path>
                                  <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                            <!-- Reposts -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  aria-label="Repost icon"
                                  class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 14"
                                  fill="none"
                                >
                                  <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="relative pt-8 group/li">
                    <!-- Line-through -->
                    <div
                      class="absolute top-0 w-10 md:w-12 grid place-items-center h-full group-last/li:h-8"
                      aria-hidden="true"
                    >
                      <div class="w-px h-full bg-pixl-light/10"></div>
                    </div>
                    <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
                      <a href="/profile" class="shrink-0">
                        <img
                          src="/images/anne.png"
                          class="size-10 md:size-12 object-cover"
                          alt=""
                        />
                      </a>
                      <div class="flex-1 border-b border-pixl-light/10 pb-8">
                        <div class="flex flex-wrap gap-3 items-center justify-between">
                          <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                            <h2><a href="/profile" class="hover:underline">Anne</a></h2>
                            <p class="text-xs text-pixl-light/50">30min</p>
                            <a
                              href="/profile"
                              class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                              >@just_Anne</a
                            >
                          </div>
                        </div>
                        <div class="text-sm mt-4 flex flex-col gap-3">
                          <p>I was just going to say this!</p>
                        </div>
                        <!-- Action buttons -->
                        <div
                          class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2"
                        >
                          <div class="flex gap-6">
                            <!-- Likes -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  class="-mt-0.5 size-4"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 20"
                                  fill="none"
                                >
                                  <path
                                    fill="currentColor"
                                    d="M6.314 3.73H3.756v2.558h2.558V3.73Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                                  ></path>
                                  <path
                                    fill="currentColor"
                                    class="opacity-0"
                                    d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                            <!-- Comments -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  aria-label="Comment icon"
                                  class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 16"
                                  fill="none"
                                >
                                  <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                                  ></path>
                                  <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                            <!-- Reposts -->
                            <div class="flex gap-2 items-center">
                              <button
                                class="group text-shadow-pixl-light hover:text-pixl-highlight"
                              >
                                <svg
                                  aria-label="Repost icon"
                                  class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 20 14"
                                  fill="none"
                                >
                                  <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                                  <path
                                    fill="#EEE"
                                    d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                                  ></path>
                                  <path
                                    fill="#EEE"
                                    d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                                  ></path>
                                </svg>
                              </button>
                              <span>23</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2days</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>I love being here, anyone else feel the same?</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img
                  src="/images/simon-chilling.png"
                  class="size-10 md:size-12 object-cover"
                  alt=""
                />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Simon </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@simonswiss</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>Whoaaaa, this is pretty cool, seriously.</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    Presumably, if you're watching this series, you've already made the decision to
                    embrace all that Laravel has to offer. However, if you're still on the fence,
                    give me just a moment to sell you on why I believe Laravel is the best framework
                    choice in the PHP world.
                  </p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/michael.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Michael </a></h2>
                    <p class="text-xs text-pixl-light/50">4h30</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@mmich_jj</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    I made this!
                    <a class="hover:underline text-pixl-highlight" href="#">#myartwork</a>
                    <a class="hover:underline text-pixl-highlight" href="#">#pixl</a>
                  </p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2days</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>I love being here, anyone else feel the same?</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img
                  src="/images/simon-chilling.png"
                  class="size-10 md:size-12 object-cover"
                  alt=""
                />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Simon </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@simonswiss</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>Whoaaaa, this is pretty cool, seriously.</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2h</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    Presumably, if you're watching this series, you've already made the decision to
                    embrace all that Laravel has to offer. However, if you're still on the fence,
                    give me just a moment to sell you on why I believe Laravel is the best framework
                    choice in the PHP world.
                  </p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/michael.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Michael </a></h2>
                    <p class="text-xs text-pixl-light/50">4h30</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@mmich_jj</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>
                    I made this!
                    <a class="hover:underline text-pixl-highlight" href="#">#myartwork</a>
                    <a class="hover:underline text-pixl-highlight" href="#">#pixl</a>
                  </p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
          <li class="pt-8">
            <div class="flex flex-col min-[400px]:flex-row gap-4 items-start">
              <a href="/profile" class="shrink-0">
                <img src="/images/adelle.png" class="size-10 md:size-12 object-cover" alt="" />
              </a>
              <div class="flex-1 border-b border-pixl-light/10 pb-8">
                <div class="flex flex-wrap gap-3 items-center justify-between">
                  <div class="flex flex-wrap gap-x-3 items-center gap-y-2 leading-none">
                    <h2><a href="/profile" class="hover:underline"> Adelle </a></h2>
                    <p class="text-xs text-pixl-light/50">2days</p>
                    <a href="/profile" class="text-sm text-pixl-light/50 hover:text-pixl-light/75"
                      >@add-elle</a
                    >
                  </div>
                  <div class="flex gap-4 items-center">
                    <button aria-label="Post options" class="flex gap-1 group py-2">
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                      <span class="size-1 group-hover:bg-pixl-light/75 bg-pixl-light/50"></span>
                    </button>
                  </div>
                </div>
                <div class="text-sm mt-4 flex flex-col gap-3">
                  <p>I love being here, anyone else feel the same?</p>
                </div>
                <!-- Action buttons -->
                <div class="mt-6 flex flex-wrap items-center justify-between gap-x-8 gap-y-2">
                  <div class="flex gap-6">
                    <!-- Likes -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          class="-mt-0.5 size-4"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 20"
                          fill="none"
                        >
                          <path fill="currentColor" d="M6.314 3.73H3.756v2.558h2.558V3.73Z"></path>
                          <path
                            fill="currentColor"
                            d="M8.872 3.73H6.313v2.558h2.559V3.73Zm2.558 2.559H8.873v2.558h2.559V6.29Zm2.561-2.559h-2.558v2.558h2.558V3.73Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M16.547 3.73h-2.559v2.558h2.559V3.73Zm2.558 2.559h-2.558v2.558h2.558V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M19.105 8.846h-2.558v2.559h2.558V8.846ZM3.756 6.289H1.197v2.558h2.559V6.29Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M3.756 8.846H1.197v2.559h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            d="M6.314 11.405H3.756v2.559h2.558v-2.559Zm2.558 2.559H6.313v2.558h2.559v-2.558Zm7.675-2.559h-2.559v2.559h2.559v-2.559Zm-2.556 2.559h-2.558v2.558h2.558v-2.558Zm-2.561 2.558H8.873v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M6.313 6.288H3.755v2.559h2.558V6.288Zm2.559 0H6.313v2.559h2.559V6.288Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M8.872 8.846H6.313v2.558h2.559V8.846Zm-2.559 0H3.755v2.558h2.558V8.846Zm2.559 2.559H6.313v2.558h2.559v-2.558Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M11.43 11.405H8.87v2.558h2.559v-2.558Zm0-2.559H8.87v2.558h2.559V8.846Zm0 5.118H8.87v2.558h2.559v-2.558Zm2.558-2.559H11.43v2.558h2.558v-2.558Zm0-2.559H11.43v2.558h2.558V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M13.988 6.288H11.43v2.559h2.558V6.288Zm2.561 2.558H13.99v2.558h2.559V8.846Z"
                          ></path>
                          <path
                            fill="currentColor"
                            class="opacity-0"
                            d="M16.549 6.288H13.99v2.559h2.559V6.288Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Comments -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Comment icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 16"
                          fill="none"
                        >
                          <path fill="#EEE" d="M4.1 0h1.682v1.682H4.1z"></path>
                          <path
                            fill="#EEE"
                            d="M2.48 0h1.682v1.682H2.48zm0 10.09h1.682v1.682H2.48zM.799 3.363h1.682v1.682H.799z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M.799 1.682h1.682v1.682H.799zm16.754 1.681h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M17.553 1.682h1.682v1.682h-1.682zM.799 5.044h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 6.726h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM.799 8.408h1.682v1.682H.799zm16.754 0h1.682v1.682h-1.682zM4.16 10.09h1.682v1.682H4.16zm8.348 0h1.682v1.682h-1.682zm-6.664 0h1.682v1.682H5.844zm1.681 1.682h1.682v1.682H7.525zm3.301 0h1.682v1.682h-1.682z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.207 13.452h1.682v1.682H9.207zm0-8.408h1.682v1.682H9.207zm-3.426 0h1.682v1.682H5.781zm6.85 0h1.682v1.682h-1.682zm1.559 5.046h1.682v1.682H14.19zM5.781 0h1.682v1.682H5.781zm1.682 0h1.682v1.682H7.463zm1.683 0h1.682v1.682H9.146z"
                          ></path>
                          <path fill="#EEE" d="M10.826 0h1.682v1.682h-1.682z"></path>
                          <path
                            fill="#EEE"
                            d="M12.508 0h1.682v1.682h-1.682zm1.682 0h1.682v1.682H14.19z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M15.871 0h1.682v1.682h-1.682zm0 10.09h1.682v1.682h-1.682z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                    <!-- Reposts -->
                    <div class="flex gap-2 items-center">
                      <button class="group text-shadow-pixl-light hover:text-pixl-highlight">
                        <svg
                          aria-label="Repost icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 14"
                          fill="none"
                        >
                          <path fill="#EEE" d="M1.801 2.72H.441v1.36h1.36V2.72Z"></path>
                          <path
                            fill="#EEE"
                            d="M3.159 2.72h-1.36v1.36h1.36V2.72Zm0-1.36h-1.36v1.36h1.36V1.36Zm1.363 0h-1.36v1.36h1.36V1.36Zm0-1.36h-1.36v1.36h1.36V0Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M5.88 0H4.52v1.36h1.36V0Zm1.363 0h-1.36v1.36h1.36V0Zm0 1.36h-1.36v1.36h1.36V1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 1.36H7.24v1.36H8.6V1.36Zm0 1.36H7.24v1.36H8.6V2.72Zm1.362 0h-1.36v1.36h1.36V2.72ZM5.88 1.36H4.52v1.36h1.36V1.36Zm0 1.36H4.52v1.36h1.36V2.72Zm0 1.36H4.52v1.36h1.36V4.08Zm0 1.36H4.52V6.8h1.36V5.44Zm0 1.36H4.52v1.36h1.36V6.8Zm1.363 1.36h-1.36v1.36h1.36V8.16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M8.6 8.16H7.24v1.36H8.6V8.16Zm2.72 1.36H9.96v1.36h1.36V9.52Zm1.36 0h-1.36v1.36h1.36V9.52Zm0 1.36h-1.36v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm1.359 1.36h-1.36v1.36h1.36v-1.36Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M16.76 12.24H15.4v1.36h1.36v-1.36Zm-2.718 0h-1.36v1.36h1.36v-1.36Zm2.718-1.36H15.4v1.36h1.36v-1.36Zm1.362 0h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M19.481 9.52h-1.36v1.36h1.36V9.52Zm-4.08 1.36h-1.36v1.36h1.36v-1.36Zm0-1.36h-1.36v1.36h1.36V9.52Zm0-1.36h-1.36v1.36h1.36V8.16Zm0-1.36h-1.36v1.36h1.36V6.8Zm0-1.36h-1.36V6.8h1.36V5.44Zm0-1.36h-1.36v1.36h1.36V4.08Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M14.042 4.08h-1.36v1.36h1.36V4.08Zm-1.362 0h-1.36v1.36h1.36V4.08Z"
                          ></path>
                        </svg>
                      </button>
                      <span>23</span>
                    </div>
                  </div>
                  <div class="flex gap-3">
                    <!-- Save -->
                    <div class="flex gap-2 items-center">
                      <button
                        class="group text-shadow-pixl-light hover:text-pixl-highlight"
                        aria-label="Save"
                      >
                        <svg
                          aria-label="Bookmark icon"
                          class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 20 21"
                          fill="none"
                        >
                          <path
                            fill="#EEE"
                            d="M4.799 10h-1.5v1.5h1.5V10Zm0 1.5h-1.5V13h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V13Zm0 1.5h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm1.5 0h-1.5V19h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V16Z"
                          ></path>
                          <path
                            fill="#EEE"
                            d="M9.299 16h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm1.5 0h-1.5V16h1.5v-1.5Zm0 1.5h-1.5v1.5h1.5V16Zm1.5 0h-1.5v1.5h1.5V16Zm1.5 1.5h-1.5V19h1.5v-1.5Zm-1.5 0h-1.5V19h1.5v-1.5Zm3-1.5h-1.5v1.5h1.5V16Zm0-1.5h-1.5V16h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V13Zm0-1.5h-1.5V13h1.5v-1.5Zm0-1.5h-1.5v1.5h1.5V10Zm-9-7.5h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5Zm1.5 0h-1.5V4h1.5V2.5ZM6.299 4h-1.5v1.5h1.5V4Zm9 0h-1.5v1.5h1.5V4Zm-10.5 1.5h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm9 0h-1.5V7h1.5V5.5Zm1.5 0h-1.5V7h1.5V5.5Zm-12 1.5h-1.5v1.5h1.5V7Zm12 0h-1.5v1.5h1.5V7Zm0 1.5h-1.5V10h1.5V8.5Zm-12 0h-1.5V10h1.5V8.5Z"
                          ></path>
                        </svg>
                      </button>
                      <span class="text-xs text-pixl-light/50">Save</span>
                    </div>
                    <!-- Share -->
                    <button
                      class="group flex gap-2 items-center text-shadow-pixl-light hover:text-pixl-highlight"
                      aria-label="Share"
                    >
                      <svg
                        aria-label="Share icon"
                        class="w-4 stroke-pixl-light fill-transparent group-hover:stroke-pixl-highlight group-hover:fill-pixl-highlight/50"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 21"
                        fill="none"
                      >
                        <g fill="#EEE" clip-path="url(#a)">
                          <path
                            d="M3.8 8.793H1.997v1.801H3.8V8.793Zm1.8 0H3.8v1.801h1.8V8.793Zm0-1.801H3.8v1.801h1.8V6.992Zm1.801 0H5.6v1.801h1.8V6.992Z"
                          ></path>
                          <path
                            d="M7.401 5.19H5.6v1.802h1.8V5.19Zm1.803 0H7.402v1.802h1.802V5.19Zm0-1.801H7.402V5.19h1.802v-1.8Z"
                          ></path>
                          <path
                            d="M11.005 3.389H9.203V5.19h1.802v-1.8Zm1.802 0h-1.801V5.19h1.801v-1.8Zm1.801 1.801h-1.801v1.802h1.801V5.19Zm-1.801 0h-1.801v1.802h1.801V5.19Zm1.801 1.802h-1.801v1.801h1.801V6.992Z"
                          ></path>
                          <path
                            d="M16.409 6.992h-1.802v1.801h1.802V6.992Zm0 1.801h-1.802v1.801h1.802V8.793Zm1.803 0H16.41v1.801h1.802V8.793ZM11.005 5.19H9.203v1.802h1.802V5.19Z"
                          ></path>
                          <path
                            d="M11.005 6.992H9.203v1.801h1.802V6.992Zm0 1.801H9.203v1.801h1.802V8.793Zm0 1.801H9.203v1.802h1.802v-1.802Zm0 1.802H9.203v1.801h1.802v-1.801Zm0 1.801H9.203V16h1.802v-1.802Z"
                          ></path>
                          <path
                            d="M11.005 15.999H9.203V17.8h1.802V16Zm-5.405 0H3.8V17.8h1.8V16Zm1.801 0H5.6V17.8h1.8V16Z"
                          ></path>
                          <path
                            d="M9.204 15.999H7.402V17.8h1.802V16Zm3.603 0h-1.801V17.8h1.801V16Zm1.801 0h-1.801V17.8h1.801V16Z"
                          ></path>
                          <path
                            d="M16.409 15.999h-1.802V17.8h1.802V16ZM3.8 14.197H1.997V16H3.8v-1.802Z"
                          ></path>
                          <path
                            d="M3.8 15.999H1.997V17.8H3.8V16Zm14.412-1.802H16.41V16h1.802v-1.802Z"
                          ></path>
                          <path d="M18.212 15.999H16.41V17.8h1.802V16Z"></path>
                        </g>
                        <defs>
                          <clipPath id="a">
                            <path fill="#fff" d="M2 3.389h16.212v14.41H2z"></path>
                          </clipPath>
                        </defs>
                      </svg>
                    </button>
                  </div>
                </div>
                <!-- -------------------- -->
                <!-- Replies -->
                <!-- -------------------- -->
                <!-- Reply prompt -->
              </div>
            </div>
          </li>
        </ol>
        <footer class="ml-14 md:ml-16 mt-24 text-center">
          <p>That's all folks!</p>
          <hr class="border-pixl-light/10 my-4" />
          <!-- White noise -->
          <div class="h-18 bg-[url(/images/white-noise.gif)] opacity-75"></div>
        </footer>
      </main>
    </div>
    <!-- ----------------------------- -->
    <!-- Right sidebar -->
    <!-- ----------------------------- -->
    <aside class="hidden lg:block w-72 xl:w-90 shrink-0 overflow-y-auto pb-8">
      <!-- ----------------------------- -->
      <!-- Search -->
      <!-- ----------------------------- -->
      <input
        type="text"
        placeholder="#Search an idea or pixel"
        class="border-b border-pixl-light/10 w-full py-1 text-sm"
      />
      <div class="border border-pixl-light/10 p-4 mt-12">
        <h2 class="text-pixl-light/50">Artists to follow</h2>
        <ol class="flex flex-col gap-4 mt-6">
          <li class="flex items-center justify-between gap-4">
            <div class="min-w-0 flex items-center gap-4">
              <img class="shrink-0 size-8" src="/images/alessia.png" alt="" />
              <p class="truncate text-sm">alessia_draws</p>
            </div>
            <button
              class="justify-self-end border-pixl-highlight/50 border px-4 py-2 shrink-0 text-pixl-highlight grid place-items-center leading-none text-xs hover:bg-pixl-highlight/10"
            >
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <div class="min-w-0 flex items-center gap-4">
              <img class="shrink-0 size-8" src="/images/anne.png" alt="" />
              <p class="truncate text-sm">just_Anne</p>
            </div>
            <button
              class="justify-self-end border-pixl-highlight/50 border px-4 py-2 shrink-0 text-pixl-highlight grid place-items-center leading-none text-xs hover:bg-pixl-highlight/10"
            >
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <div class="min-w-0 flex items-center gap-4">
              <img class="shrink-0 size-8" src="/images/mr-anderson.png" alt="" />
              <p class="truncate text-sm">Mr. Anderson</p>
            </div>
            <button
              class="justify-self-end border-pixl-highlight/50 border px-4 py-2 shrink-0 text-pixl-highlight grid place-items-center leading-none text-xs hover:bg-pixl-highlight/10"
            >
              Follow
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <div class="min-w-0 flex items-center gap-4">
              <img class="shrink-0 size-8" src="/images/michael.png" alt="" />
              <p class="truncate text-sm">Michael</p>
            </div>
            <button
              class="justify-self-end border-pixl-highlight/50 border px-4 py-2 shrink-0 text-pixl-highlight grid place-items-center leading-none text-xs hover:bg-pixl-highlight/10"
            >
              Follow
            </button>
          </li>
        </ol>
        <button class="text-sm text-pixl-light/50 mt-6 hover:text-pixl-light/75">Show More</button>
      </div>
      <div class="mt-4 border border-pixl-light/10 p-4">
        <h2 class="text-pixl-light/50">Follow Idea Streams</h2>
        <ol class="flex flex-col gap-3 mt-6">
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Breakfast ideas and why not a long title here?</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Some other idea stream</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Another idea stream</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Some other idea stream</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Another idea stream</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
          <li class="flex items-center justify-between gap-4">
            <p class="truncate text-sm">Some other idea stream</p>
            <button
              class="border-pixl-highlight/50 hover:bg-pixl-highlight/10 border size-7 shrink-0 text-pixl-highlight text-xl grid place-items-center leading-none"
            >
              +
            </button>
          </li>
        </ol>
        <button class="text-sm text-pixl-light/50 mt-6 hover:text-pixl-light/75">Show More</button>
      </div>
    </aside>
    <script type="module" src="./src/entry.js"></script>
  </body>
</html>