.card-9844.gradient-style-hover .card-9844__wrapper *:not(.card-9844__number) {
    transition: color 0.4s ease;
}

.card-9844.gradient-style-hover .card-9844__wrapper:hover *:not(.card-9844__number) {
    color: var(--color-2) !important;
}

.card-9844.gradient-style-hover .card-9844__wrapper {
    position: relative;
    isolation: isolate;
    background: var(--color-2) !important;
    overflow: hidden;
}

.card-9844.gradient-style-hover .card-9844__wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-9);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card-9844.gradient-style-hover .card-9844__wrapper:hover::before {
    opacity: 1;
}

.card-9844.gradient-style-hover .card-9844__number {
    background-image: var(--color-9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: -webkit-text-fill-color 0.4s ease, color 0.4s ease;
}

.card-9844.gradient-style-hover .card-9844__wrapper:hover .card-9844__number {
    -webkit-text-fill-color: var(--color-2);
    color: var(--color-2);
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper {
    position: relative;
    isolation: isolate;
    background: var(--color-2) !important;
    overflow: hidden;
    color: var(--color-2);
    transition: color 0.4s ease;
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper *:not(.card-9844__number) {
    color: inherit;
    transition: color 0.4s ease;
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper:hover {
    color: var(--color-1);
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-9);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper:hover::before {
    opacity: 0;
}

.card-9844.gradient-style-hover-reverse .card-9844__number {
    background-image: var(--color-9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--color-2);
    color: var(--color-2);
    transition: -webkit-text-fill-color 0.4s ease, color 0.4s ease;
}

.card-9844.gradient-style-hover-reverse .card-9844__wrapper:hover .card-9844__number {
    -webkit-text-fill-color: transparent;
    color: transparent;
}