.card {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}
 
.card-media {
    border-radius: 16px 16px 16px 16px;
}
 
@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
 
@keyframes spin {
    to { --a: 360deg; }
}
 
.card::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
 
    background: conic-gradient(
        from var(--a),
        transparent 0deg,
        #7c3aed 80deg,
        #06b6d4 160deg,
        transparent 240deg,
        #7c3aed 320deg,
        transparent 360deg
    );
 
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
 
.card:hover::before {
    opacity: 1;
    animation: spin 5s linear infinite;
}