Почему в vue transition на блок не работает

Хотел чтобы при hover div блок менял цвет но это происходить слишком быстро добавил transition:.4s но все равно transtion не работает

<template>
    <div class="about " id="about">
        <div class="container">
            <div class="about__wrapper">
                <div class="about__item" v-for="itemContent in itemContents" :key="itemContent.id">
                    <span class="number">{{ itemContent.number }}</span>
                    <p class="text">{{ itemContent.text }}</p>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
let itemId = 1
export default {
    data() {
        return {
            itemContents: [
                {
                    id: this.id++,
                    number: '3+',
                    text: 'лет на рынке'
                },
                {
                    id: this.id++,
                    number: '100+',
                    text: 'готовых решений'
                },
                {
                    id: this.id++,
                    number: '30+',
                    text: 'довольных клиентов'
                }
            ]
        }
    }
}
</script>

<style>
.about {
    margin-bottom: 99px;
}

.about__item {
    background: transparent;
    border-radius: 5px;
    padding: 10px 0 25px;
    background: #FF7F49;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 8;
}

.about__item:hover {
    z-index: -1;
    background: linear-gradient(100.25deg, #FF7F49 -0.05%, #FFC6AE 101.99%);
}

.number {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #FFFFFF;
}

.text {
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
    color: #FFFFFF;
}

.about__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
</style>