how can i turn the rgbGlow into a true glow which cycles through the color in such a way that at least 4 colors are visible at once circling the border. Add make the colors twelve to make it stand out more and meaning 3 cycles  (4 colors moving to the next 4 and the next 4 then loop back): 
.card {
  transform-style: preserve-3d;
  transition: all 0.1s ease;
}

.card {
  transform-style: preserve-3d;
  transition: all 0.1s ease;
  box-shadow: rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
              rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
              rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
              rgb(74, 0, 224, 0.06) 0px 2px 1px,
              rgb(74, 0, 224, 0.09) 0px 3px 1px, 
              rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
}

.proda:hover {
    animation: rgbGlow 5s infinite;
}

@keyframes rgbGlow {
  0%, 100% { 
    box-shadow: 0 0 10px #FF0000, 0 0 20px rgba(255, 0, 0, 0.5), 
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset; 
  } 
  14% { 
    box-shadow: 0 0 10px #FF7F00, 0 0 20px rgba(255, 127, 0, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
  }
  28% { 
    box-shadow: 0 0 10px #FFFF00, 0 0 20px rgba(255, 255, 0, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset; 
  }
  42% { 
    box-shadow: 0 0 10px #00FF00, 0 0 20px rgba(0, 255, 0, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
  }
  57% { 
    box-shadow: 0 0 10px #0000FF, 0 0 20px rgba(0, 0, 255, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
  }
  71% { 
    box-shadow: 0 0 10px #4B0082, 0 0 20px rgba(75, 0, 130, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
  }
  85% { 
    box-shadow: 0 0 10px #9400D3, 0 0 20px rgba(148, 0, 211, 0.5),
                rgb(74, 0, 224, 0.17) 0px -23px 25px 0px inset, 
                rgb(74, 0, 224, 0.15) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.1) 0px -5px 3px 0px inset, 
                rgb(74, 0, 224, 0.06) 0px 2px 1px,
                rgb(74, 0, 224, 0.09) 0px 3px 1px, 
                rgb(74, 0, 224, 0.09) 0px 8px 10px inset;
  }
}

.product-img {
  transition: all 0.5s ease;
}
.title {
  font-weight: 600;
}

.purchase {
  cursor: pointer;
}