Подсвечивание карточек при наведении

<style>

.uc-tistols-cards02:hover > .tistols-crd02 .tn-atom:after {
opacity: 1;
}

.tistols-crd02 .tn-atom {
background-color: rgba(255, 255, 255, 0.05);
cursor: pointer;
}

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

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

.tistols-crd02 .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;
}

.tistols-crd02 .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.getElementsByClassName("uc-tistols-cards02")[0].onmousemove = e => {
for(const Tcard02 of document.getElementsByClassName("tistols-crd02")) {
const rect = Tcard02.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;

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