.hover-ripple-container{position:relative;overflow:hidden}.hover-ripple-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.hover-ripple-effect{transform:scale(0);border-radius:100%;position:absolute;opacity:.6;background:linear-gradient(135deg,#7257A8,#D82789);animation-name:ripple;animation-duration:var(--duration);pointer-events:none}@keyframes ripple{to{opacity:0;transform:scale(2.5)}}.gradient-hover-bg{position:relative;z-index:1}.gradient-hover-bg:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#7257A8,#D82789);border-radius:inherit;opacity:0;transition:opacity .8s ease-in-out;z-index:-1}.gradient-hover-bg:hover:before{opacity:1}