{loop:$likelist $v}
<div class="flex flex-col items-center desktop-hover-effect animate-on-scroll">
    <div class="video-card relative w-full aspect-[530/726] group my-2 rounded-lg overflow-hidden shadow-md hover:shadow-2xl transition-all duration-500">
        {if:!empty($v['remarks'])}<div class="badge-quality">{h:$v.remarks}</div>{/if}
        <a class="absolute inset-0 flex rounded-lg group-hover:z-20 transition-all duration-300" href="{$v.url}">
            <img decoding="async" loading="lazy" alt="{h:$v.name}" class="rounded-lg w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110" src="{$v.pic}">
            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute inset-0 flex flex-col justify-between opacity-0 group-hover:opacity-100 transition-all duration-300">
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="rounded-full bg-[var(--color-primary)] w-12 h-12 flex items-center justify-center shadow-lg transform scale-75 group-hover:scale-100 transition-all duration-300 ease-out">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="font-size: 16px; color: var(--bg-base); margin-left: 2px;">
                            <path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path>
                        </svg>
                    </div>
                </div>
                <div class="bg-gradient-to-t from-black/95 via-black/80 to-transparent px-2.5 py-2.5">
                    <div class="flex flex-col overflow-hidden">
                        <span class="antialiased text-[11px] text-[var(--color-primary)] font-bold line-clamp-1">{h:$v.name}</span>
                        <div class="vod-tags flex flex-row flex-wrap gap-1 py-1">
                            <span class="antialiased rounded bg-white/10 text-xs text-white/60 px-1.5 py-0.5">{h:$v.year}</span>
                            <span class="antialiased rounded bg-white/10 text-xs text-white/60 px-1.5 py-0.5">{h:$v.area}</span>
                        </div>
                        <div class="flex overflow-hidden">
                            <span class="antialiased text-xs text-white/50 line-clamp-2 leading-relaxed">{h:$v.blurb}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <span class="text-center text-[13px] mx-1 mt-2 text-white/70 hover:text-[var(--color-primary)] transition-colors duration-200 line-clamp-2 w-full px-1">{h:$v.name}</span>
</div>
{/loop}