Bricks: Glowing Elements.css

root {
   // Before Element
   --before-blur: 50px;
   --before-display: flex;
   --before-width: 40rem;
   --before-height: 40rem;
   --before-inset: 0 auto auto 0;
   --before-bg: var(--action);
   --before-opacity: .12;
   --before-rotate: -5deg;

   // After Element
   --after-blur: 50px;
   --after-display: flex;
   --after-width: 40rem;
   --after-height: 40rem;
   --after-inset: auto 0 0 auto;
   --after-bg: var(--secondary);
   --after-opacity: .12;
   --after-rotate: 5deg;

   position: relative;
   isolation: isolate;
}

root::before {
   content: "";
   width: var(--before-width);
   height: var(--before-height);
   background-color: var(--before-bg);
   display: var(--before-display);
   position: absolute;
   inset: var(--before-inset);
   z-index: -1;
   transform: var(--before-rotate);
   filter: blur(var(--before-blur));
   opacity: var(--before-opacity);
}

root::after {
   content: "";
   width: var(--after-width);
   height: var(--after-height);
   background-color: var(--after-bg);
   display: var(--after-display);
   position: absolute;
   inset: var(--after-inset);
   z-index: -1;
   transform: var(--after-rotate);
   filter: blur(var(--after-blur));
   opacity: var(--after-opacity);
}