3D эффект для стандартных карточек

<style>
/*3D-эффект для карточек стандартных блоков*/
:root{
    --perspective: 600px;       /*Значение перспективы для родительского контейнера*/
    --transformNorm: rotateX(12deg) rotateY(0deg) rotateZ(0deg);    /*Поворот карточки в нормальном состоянии*/
    --transformHover: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(30px);    /*Поворот карточки при наведении*/
    --transition: 0.3s ease-in-out;     /*Скорость и плавность анимации*/
}
@media screen and (min-width:1200px){
    .t983__row{     /*Класс контейнера*/
        perspective:var(--perspective); 
        -webkit-perspective:var(--perspective);
        overflow: visible !important;       /*Чтобы карточка не обрезалась*/
        background-color: transparent !important;
    }
    /*Обычное состояние карточки*/
    .t983__col{   /*Класс карточки*/
        transform: var(--transformNorm);  
        -webkit-transform: var(--transformNorm);
        transition: var(--transition);
        -webkit-transition: var(--transition);
    }
    /*Искажение карточки при наведении*/
    .t983__col:hover{ /*Класс карточки*/
        transform: var(--transformHover);
        -webkit-transform: var(--transformHover);
    }
}
</style>