:root {
  --card-color: rgb(23, 23, 23);
}


/* TODO. 💁 ID USED FOR THE JAVASCRIPT */
#cards {
  width: calc(100% - 20px);
}

#cards:hover > .card::after {
  opacity: 1;
}



.card:hover::before {
  opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
}

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

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

.card > .card-content {
  background-color: var(--card-color);
  border-radius: inherit;
  flex-grow: 1;
  inset: 1px;
  z-index: 2;
}