Guide Section with Gradient Video Card

<section class="mt-8 px-5 max-w-xl">

  <article
    class="relative overflow-hidden ring-1 ring-white/10 shadow-[0_10px_40px_-10px_rgba(160,100,255,0.35)] bg-gradient-to-t from-[#362A84]/0 to-[#362A84]/20 rounded-3xl transition duration-500 ease-out motion-reduce:transition-none opacity-100 translate-y-0 blur-none"
    style="">
    <div
      class="flex bg-[radial-gradient(circle_at_bottom_left,var(--tw-gradient-stops))] from-[#8879D1]/20 to-slate-800/0">
      <div class="relative w-[44%]">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/37f704fc-8b0f-4c5d-8a64-a61ac371001c_800w.jpg" alt="Crystal array" class="h-full w-full object-cover">
        <span class="absolute right-2 top-2 rounded-md bg-black/60 px-2 py-1 text-[11px] text-white">5:50</span>
        <div class="absolute inset-0 bg-gradient-to-t from-[#0B0B0F] via-transparent to-transparent opacity-60"></div>
      </div>
      <div
        class="w-[56%] bg-[radial-gradient(circle_at_bottom_left,var(--tw-gradient-stops))] from-[#362A84]/50 to-[#362A84]/0 pt-4 pr-4 pb-4 pl-4">
        <h3 class="line-clamp-1 text-[16px] font-semibold text-white tracking-tight">Prototype to Publish</h3>
        <p class="mt-1 text-[11px] uppercase tracking-wide text-slate-400">By Orbits Studio</p>
        <p class="mt-2 text-[12px] text-slate-300">14k views — 1 month ago</p>
      </div>
    </div>
  </article>
</section>