@media only screen and (min-width: 768px) {
  .cards:hover > .card::after {
    opacity: 1;
  }
  .card:hover::before {
    opacity: 1;
  }
  .card::before,
  .card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
  }
  .card::before {
    background: radial-gradient(
      800px circle at var(--mouse-x) var(--mouse-y), 
      rgba(233, 172, 74, 0.4)
      transparent 60%
    );
    z-index: 3;
  }
  .card::after {  
    background: radial-gradient(
      600px circle at var(--mouse-x) var(--mouse-y), 
      rgba(233, 172, 74, 0.95),
      transparent 60%
    );
    z-index: 1;
  }
}