fix: improve post card styling

app/(main)/blog/BlogPostCard.tsx

@@ -17,7 +17,7 @@ export function BlogPostCard({ post, views }: { post: Post; views: number }) {
  <Link
  href={`/blog/${slug}`}
  prefetch={false}
- className="group relative w-full transform-gpu rounded-3xl bg-transparent ring-2 ring-zinc-800/10 transition-transform hover:-translate-y-0.5 dark:ring-zinc-200/10"
+ className="group relative w-full transform-gpu rounded-3xl bg-transparent ring-2 ring-[--post-image-bg] transition-transform hover:-translate-y-0.5"
  style={
  {
  '--post-image-fg': mainImage.asset.dominant?.foreground,
@@ -38,11 +38,11 @@ export function BlogPostCard({ post, views }: { post: Post; views: number }) {
  />
  </div>
  <span className="relative z-10 flex w-full flex-col gap-0.5 rounded-b-3xl bg-cover bg-bottom bg-no-repeat p-4 bg-blend-overlay [background-image:var(--post-image)] before:pointer-events-none before:absolute before:inset-0 before:z-10 before:select-none before:rounded-b-3xl before:bg-[--post-image-bg] before:opacity-70 before:transition-opacity after:pointer-events-none after:absolute after:inset-0 after:z-10 after:select-none after:rounded-b-3xl after:bg-gradient-to-b after:from-transparent after:to-[--post-image-bg] after:backdrop-blur after:transition-opacity group-hover:before:opacity-30 md:p-5">
- <h2 className="z-20 text-base font-bold tracking-tight text-[--post-image-fg] opacity-70 md:text-xl">
+ <h2 className="z-20 text-base font-bold tracking-tight text-[--post-image-fg] opacity-70 transition-opacity group-hover:opacity-100 md:text-xl">
  {title}
  </h2>
 
- <span className="relative z-20 flex items-center justify-between opacity-50 transition-opacity group-hover:opacity-100">
+ <span className="relative z-20 flex items-center justify-between opacity-50 transition-opacity group-hover:opacity-80">
  <span className="inline-flex items-center space-x-3">
  <span className="inline-flex items-center space-x-1 text-[12px] font-medium text-[--post-image-fg] md:text-sm">
  <CalendarIcon />