I have an “a” element which works like a button, it has a background picture. I need the background picture to become slightly bigger on :hover with 0.3 second transition. The background picture changes, but there is no animation, it always works instantly no matter what I do. So the transition effect is broken for some reason, but why?

Here is html code:

<div class="wrapper">
            <a href="/delivery" class="item item__delivery">
                        <p>Delivery</p>
            </a>
            <a href="/installation" class="item item__installation">
                        <p>Installation</p>
            </a>
</div>

Here is CSS:

    a {
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }
    
    .wrapper {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }
    
    .wrapper .item {
        width: calc((100% - 10px) / 2);
        background-size: cover; 
        background-repeat: no-repeat;
        transition: 0.3s;
    }
    
    .wrapper .item__delivery {
        background-image: url("/image/product_card/left_button.webp");
    }
    
    .wrapper .item__installation {
        background-image: url("/image/product_card/right_button.webp");
    }

.wrapper .item:hover {
    background-size: auto 105%;
}

What is my mistake here?