.tool-card {
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(129.54% 123.19% at 14.62% 12.5%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #010314;
    position: relative;
    transition: background .2s ease;
}

.tool-card:hover {
    background: radial-gradient(129.54% 123.19% at 14.62% 12.5%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #010314;
}

.tool-card h4 {
    transition: color .2s ease;
}

.tool-card h4 {
    color: var(--white);
}

.tool-icon-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--dark-background);
    color: var(--white);
    z-index: 1;
    transition: background .2s ease;
}

.tool-icon-holder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: linear-gradient(125deg, #DC2626 8.09%, #581C87 92.87%);
    transition: opacity .2s ease;
    z-index: 0;
}

.tool-icon-holder p {
    color: var(--white);
    z-index: 1;
}

@media (min-width: 992px) {
    .tool-card {
        background: var(--white);
    }


    .tool-card h4 {
        color: var(--text-dark);
    }

    .tool-card:hover h4 {
        color: var(--white);
    }

    .tool-card:hover::after {
        opacity: 1;
    }

    
    .tool-icon-holder {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .tool-icon-holder {
        background: var(--dark-background);
    }

    .tool-card .tool-icon-holder::after {
        opacity: 0;
    }

    .tool-card:hover .tool-icon-holder::after {
        opacity: 1;
    }
}