Текст становится размытым во время реализации преобразования

Question

Я посмотрел и попробовал любое предлагаемое решение, но безрезультатно.У меня есть компонент карты с некоторым текстом внутри, так как мы наведем курсор на карту. Я установил свойства transform: translate (-2px), и текст внутри карты становится размытым во время перезаписи, и после того, как переход сделан, возврат текстав нормальном состоянии.вот код, что мне здесь не хватает?это происходит как на chrome, так и на firefox, я дважды проверил.

спасибо :))

.card{
    margin: 0 auto;
    padding:4rem;       
    margin: 4rem;     
    font-size: 1.6rem; 
    box-shadow: 0 2rem 2rem rgba(0,0,0,.6); 
    background-color: $color-grey-light-1;
    transition: all .2s; 
    transform:skewX(-12deg);   

    &__details   
    {  
        transform: skewX(12deg); 
    }


    &__header{
        display: inline-block; 
        font-size: 1.8rem;  
        margin-bottom: 1rem;   
    } 

    &:hover{  
        transform:skewX(-12deg) translateY(-2px);
        cursor: pointer;  
    }

}