<style>

#rec659645375:hover > .card .tn-atom:after {
  opacity: 1;
}

.card .tn-atom {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.card .tn-atom:hover:before {
  opacity: 1;
}

.card .tn-atom:before,
.card .tn-atom:after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card .tn-atom:before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.12),
    transparent 40%
  );
  z-index: 3;
}

.card .tn-atom:after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.8),
    transparent 40%
  );
  z-index: 1;
}

</style>

<script>
    document.getElementById("rec659645375").onmousemove = e => {
  for(const card of document.getElementsByClassName("card")) {
    const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    card.style.setProperty("--mouse-x", `${x}px`);
    card.style.setProperty("--mouse-y", `${y}px`);
  };
}
</script>