.ring { position: relative; }

.ring::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;

  background: var(--ring-paint, linear-gradient(180deg, var(--color-icon-bg-wi) 0%, rgba(240, 240, 240, 0) 66.327%));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero__badge:hover,
.how-card:hover,
.feature-card:hover {
  --hover-scale: 1.02;
  --ring-paint: linear-gradient(180deg, rgba(240, 240, 240, 0.24) 0%, rgba(240, 240, 240, 0) 66.327%);
  background-color: rgba(240, 240, 240, 0.04);
  box-shadow: inset 0 0 20px 0 rgba(240, 240, 240, 0.1);
}