Blurred circle inside div

<section class="relative bg-object rounded-md mx-1 py-1 -z-20">
    <div class="circle" />
    <h2 class="text-center">{title}</h2>
    <p class="mx-3">{description}</p>
</section>

<style>
    .circle {
        --radius: 200px;
        --bg-gradient: linear-gradient(theme(colors.accent), #fa431b);
        @apply rounded-full bg-accent absolute -z-10;
        width: var(--radius);
        height: var(--radius);
        bottom: calc(0px - var(--radius) / 2);
        left: calc(0px - var(--radius) / 2);
        filter: blur(30px);
        background: var(--bg-gradient);
    }
</style>