palina-theme/partials/post-card.hbs

<article class="post-grid-item opacity-0 h-80">
    <a href="{{url}}" class="group block h-full relative bg-[var(--bg-secondary)] rounded-xl shadow-lg overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2 hover:ring-2 hover:ring-[var(--brand-primary)]/50">
        {{#if feature_image}}
            <img
                class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
                src="{{img_url feature_image size="m"}}"
                srcset="{{img_url feature_image size="s"}} 400w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 800px) 400px, (max-width: 1200px) 600px, 1000px"
                alt="{{title}}"
                loading="lazy"
            >
        {{else}}
            <div class="absolute inset-0 w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl transition-colors duration-500 group-hover:bg-[var(--bg-secondary)]">No Image</div>
        {{/if}}

        {{!-- Gradient Overlay --}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-70 group-hover:opacity-80 transition-opacity duration-500"></div>

        {{!-- Content Overlay --}}
        <div class="absolute inset-0 p-8 flex flex-col justify-end">
            <div class="overflow-hidden">
                {{#if primary_tag}}
                    <span class="text-[var(--brand-primary)] text-xs uppercase tracking-[0.2em] font-bold mb-3 block transform transition-transform duration-500 translate-y-4 group-hover:translate-y-0">
                        {{primary_tag.name}}
                    </span>
                {{/if}}
                <h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2 transform transition-transform duration-500 delay-75 translate-y-2 group-hover:translate-y-0">
                    {{title}}
                </h2>
                
                {{!-- Decorative line that expands on hover --}}
                <div class="w-0 h-1 bg-[var(--brand-primary)] mt-4 transition-all duration-500 ease-out group-hover:w-16"></div>
            </div>
        </div>
    </a>
</article>