Code Examples
            
            
<div class="grid grid-cols-1 gap-12 pb-20 pt-12 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-4 px-5">
  <div class="col-span-1">
    <a href="#" class="group">
      <div class="relative dark:shadow-dark-950 mb-10 block shadow-lg rounded-lg shadow-gray-400 group-hover:shadow-gray-400/75 dark:group-hover:shadow-black overflow-hidden duration-700">
        <div class="h-[360px] rounded-lg bg-[url('https://gjworks.dev/assets/images/bg39.jpg')] bg-cover bg-center transition duration-700 group-hover:scale-[1.08]">
          <div class="absolute inset-0 bg-gradient-to-b from-gray-950/40 via-gray-950/30 to-gray-950/40 dark:from-dark-950/25 dark:via-dark-950/50 dark:to-dark-950/75"></div>
        </div>
      </div>
      <div class="px-1">
        <div class="mb-6 w-full">
          <div class="dark:text-dark-100 mb-3 line-clamp-2 text-2xl font-light text-gray-600 group-hover:text-black dark:group-hover:text-white">
            Alien: River of Pain Revisions 2.0
          </div>
          <div class="line-clamp-3 text-sm text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white">
            The birth of Rebecca Jorden, Known to her famliy as Newt, is
            a cause for celebration. But as the colony grows and
            expands, so, too, do the Political struggles between a small
            be-tachment of Colonial Marines.
          </div>
        </div>

        <div class="flex items-center">
          <div class="flex cursor-pointer items-center gap-2 py-1">
            <div class="text-xs text-gray-950 dark:text-dark-200">
              Web Design
            </div>
            <div class="text-xs text-gray-300 dark:text-dark-600">
              |
            </div>
            <div class="text-xs text-gray-400 dark:text-dark-500">
              1달전
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</div>