Загрузка...
Адаптивный Hero Section с галереей игр в стиле Masonry. Идеально для промо-страниц и витрин игровых коллекций.
<section class="sm:p-8 relative bg-neutral-900/60 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 items-start relative z-10">
<!-- Left copy -->
<div class="flex flex-col min-h-full justify-between lg:col-span-5">
<div class="">
<span class="text-sm font-normal text-neutral-400">Highlights</span>
<h2 class="text-[40px] sm:text-6xl lg:text-7xl leading-[0.9] text-white tracking-tight w-full h-full mt-2">
Curated collections that hit different.
</h2>
<!-- Divider -->
<div class="h-px bg-white/10 mt-6"></div>
<!-- About features -->
<div class="mt-6">
<p class="text-sm font-medium text-white tracking-tight">About & Features</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3.5 h-3.5" style="stroke-width:1.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
Secure checkout
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-[14px] h-[14px]" style="stroke-width:1.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
Instant delivery
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3.5 h-3.5" style="stroke-width:1.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Exclusive bundles
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cloud" class="lucide lucide-cloud w-3.5 h-3.5" style="stroke-width:1.5"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" class=""></path></svg>
Cloud saves
</span>
<span class="inline-flex items-center gap-2 text-xs text-neutral-200 bg-white/5 border-white/10 border rounded-full py-1.5 px-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="gamepad-2" class="lucide lucide-gamepad-2 w-[14px] h-[14px]" style="stroke-width:1.5"><line x1="6" x2="10" y1="11" y2="11" class=""></line><line x1="8" x2="8" y1="9" y2="13" class=""></line><line x1="15" x2="15.01" y1="12" y2="12" class=""></line><line x1="18" x2="18.01" y1="10" y2="10" class=""></line><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" class=""></path></svg>
Controller support
</span>
</div>
</div>
<!-- Divider -->
<!-- Updated Timeline -->
<div class="mt-6 relative">
</div>
<!-- Divider -->
</div>
<div class="w-full mt-10">
<div class="">
<p class="text-sm font-medium text-white tracking-tight">Built for players</p>
<p class="max-w-sm text-sm text-neutral-300 mt-1">
Fast checkout, wishlist across platforms, library sync, and flexible refunds where available.
</p>
<a href="#charts" class="inline-flex items-center justify-center gap-2 hover:bg-emerald-600/90 transition max-w-sm text-sm font-normal text-white bg-emerald-600 h-10 rounded-full mt-4 pr-4 pl-4">
Explore top charts
<span class="inline-flex h-2 w-2 rounded-full bg-white"></span>
</a>
</div>
</div>
</div>
<!-- Right: Pinterest-style Gallery Grid -->
<div class="lg:col-span-7">
<div class="columns-2 sm:columns-3 md:columns-4 gap-3 space-y-3">
<!-- Card 1 - Medium -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4a4acf78-895f-407d-bc33-8f52228457a2_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/15 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-check" class="lucide lucide-badge-check h-3.5 w-3.5" style="stroke-width:1.5"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">AAA Spotlight</p>
</div>
</article>
<!-- Card 2 - Short -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a2794f00-8b0a-482f-99c5-8bb7858d7262_800w.jpg)]" style="height: 180px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-[14px] h-[14px]" style="stroke-width:1.5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Indie Darlings</p>
</div>
</article>
<!-- Card 3 - Medium (Fixed height) -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/570174c2-e28e-4cf6-8306-4e537fdf655b_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="gamepad-2" class="lucide lucide-gamepad-2 w-[14px] h-[14px]" style="stroke-width:1.5"><line x1="6" x2="10" y1="11" y2="11" class=""></line><line x1="8" x2="8" y1="9" y2="13" class=""></line><line x1="15" x2="15.01" y1="12" y2="12" class=""></line><line x1="18" x2="18.01" y1="10" y2="10" class=""></line><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Couch Co‑op</p>
</div>
</article>
<!-- Card 4 - Short -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c6bb21d7-3ce2-44b4-abbf-2b0d092cd7fc_800w.jpg)]" style="height: 160px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trophy" class="lucide lucide-trophy h-3.5 w-3.5" style="stroke-width:1.5"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978" class=""></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978" class=""></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18" class=""></path><path d="M4 22h16" class=""></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" class=""></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Esports Ready</p>
</div>
</article>
<!-- Card 5 - Tall -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/42eb438f-6f99-48c5-acca-142628bae996_800w.jpg)]" style="height: 240px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/15 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star h-3.5 w-3.5" style="stroke-width:1.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Premium RPG</p>
</div>
</article>
<!-- Card 6 - Medium -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a27fc248-8f92-46c8-8485-ca064c4a4da4_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="flag" class="lucide lucide-flag h-3.5 w-3.5" style="stroke-width:1.5"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Racing Elite</p>
</div>
</article>
<!-- Card 7 - Short -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ad5b7852-df28-4652-927c-e91063201d7b_800w.jpg)]" style="height: 180px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="compass" class="lucide lucide-compass h-3.5 w-3.5" style="stroke-width:1.5"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Adventure Quest</p>
</div>
</article>
<!-- Card 8 - Medium -->
<article class="relative overflow-hidden bg-center break-inside-avoid bg-cover border-white/10 rounded-2xl mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a8b87491-25ec-4c91-8d04-24e50f585f86_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="target" class="lucide lucide-target h-3.5 w-3.5" style="stroke-width:1.5"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="6" class=""></circle><circle cx="12" cy="12" r="2" class=""></circle></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Neon Shooter</p>
</div>
</article><article class="relative overflow-hidden bg-center break-inside-avoid bg-cover border-white/10 rounded-2xl mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/60408e62-4500-47f1-88e9-961f9f37d0fe_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="scan-qr-code" class="lucide lucide-scan-qr-code lucide-target w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(255, 255, 255);"><path d="M17 12v4a1 1 0 0 1-1 1h-4" class=""></path><path d="M17 3h2a2 2 0 0 1 2 2v2" class=""></path><path d="M17 8V7" class=""></path><path d="M21 17v2a2 2 0 0 1-2 2h-2" class=""></path><path d="M3 7V5a2 2 0 0 1 2-2h2" class=""></path><path d="M7 17h.01" class=""></path><path d="M7 21H5a2 2 0 0 1-2-2v-2" class=""></path><rect x="7" y="7" width="5" height="5" rx="1" class=""></rect></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="leading-tight text-base font-medium text-white tracking-tight">Pixel</p>
</div>
</article>
<!-- Card 9 - Short -->
<!-- Card 10 - Tall -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8b0b18d8-b18c-4860-8aff-de03a2c07ce7_800w.jpg)]" style="height: 240px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield h-3.5 w-3.5" style="stroke-width:1.5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Defense Force</p>
</div>
</article>
<!-- Card 11 - Short -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4b86f73f-98ba-4aaa-bdbb-8917c4ef30f3_800w.jpg)]" style="height: 160px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="music" class="lucide lucide-music h-3.5 w-3.5" style="stroke-width:1.5"><path d="M9 18V5l12-2v13" class=""></path><circle cx="6" cy="18" r="3" class=""></circle><circle cx="18" cy="16" r="3" class=""></circle></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Rhythm Games</p>
</div>
</article>
<!-- Card 12 - Medium -->
<article class="relative overflow-hidden bg-center bg-cover border-white/10 rounded-2xl break-inside-avoid mb-3 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/01385585-23e2-4469-9fa5-49dab03e3c72_800w.jpg)]" style="height: 220px;">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="puzzle" class="lucide lucide-puzzle h-3.5 w-3.5" style="stroke-width:1.5"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" class=""></path></svg>
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">Puzzle Masters</p>
</div>
</article>
</div>
</div>
</div>
</section>