Kaart met lichtbundel

<!-- Kaart met lichtbundel · NedDev · eigen werk. -->
<div class="jouw-container">
<article class="ei-spt"><span class="ei-spt__k">Pakket Groei</span><h4 class="ei-spt__h">€ 149 <small>per maand</small></h4><p class="ei-spt__p">Hosting, onderhoud en elke maand twee uur aanpassingen. Maandelijks opzegbaar.</p></article>
</div>

/* Kaart met lichtbundel · NedDev · eigen werk. */
.ei-spt{--x:30%;--y:20%;position:relative;width:80%;max-width:320px;box-sizing:border-box;padding:22px;border-radius:6px;background:#0a0a0a;color:#fff;overflow:hidden;isolation:isolate}
.ei-spt::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--x) var(--y),rgba(245,72,15,.28),transparent 60%);transition:opacity .3s}
.ei-spt::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(200px circle at var(--x) var(--y),#F5480F,rgba(255,255,255,.12) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ei-spt__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#F5480F}
.ei-spt__h{margin:10px 0 8px;font-family:'Switzer',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em}
.ei-spt__h small{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:0}
.ei-spt__p{margin:0;font-family:'Switzer',sans-serif;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}

// Kaart met lichtbundel · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var c=root.querySelector('.ei-spt');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
c.addEventListener('pointermove',function(e){var r=c.getBoundingClientRect();c.style.setProperty('--x',(e.clientX-r.left)+'px');c.style.setProperty('--y',(e.clientY-r.top)+'px');});
c.addEventListener('pointerleave',function(){c.style.setProperty('--x','30%');c.style.setProperty('--y','20%');});
}
init(document.querySelector('.jouw-container'));