При использовании transform: scale некорректно работает object-fit

Есть карточки товаров (выглядят как карточки товаров). Картинка, потом заголовок и описание.

<section class="projects__section c-container--center-max">
    <h2 class="visually-hidden">Список проектов</h2>
    <ul class="projects__list">
        <li class="projects__item">
            <a href="#">
            <div class="card">
                <picture>
                    <source srcset="img/[email protected] 1000w" media="(min-width: 750px)"/>
                    <source srcset="img/[email protected] 900w" media="(max-width: 750px)"/>
                    <img class="card__img" src="img/[email protected]" alt="Movie 1"/>
                </picture>
                <div class="w-card__text">
                    <h3 class="card__title">The Movie</h3>
                    <p class="card__description">Movie in cinema</p>
                </div>
            </div>
            </a>
        </li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
        <li class="projects__item"></li>
    </ul>
</section>

:root {
    --max-width: 1280px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.c-container--center-max {
    margin: 0 auto;
    max-width: var(--max-width);
}
.projects__section {
    padding: 30px 0px;
}
.projects__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, auto));
    gap: 1rem;
    align-items: stretch;
    list-style: none;
}
.projects__item {
    --transition-time: 0.3s;
    display: grid;
    align-items: stretch;

    box-shadow: 0 0 20px rgb(142 78 199 / 20%);
    border-radius: 5px;
    
    transition: var(--transition-time) ease;
}
.card {
    display: grid;
    grid-template-rows: minmax(450px,75%) repeat(2, auto);
    grid-template-areas:
    'card__img'
    'w-card__text';

    background-color: #fff;
    transition: var(--transition-time) ease;
    overflow: hidden;
}
.card__img {
    width: 100%;
    grid-area: card__img;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    display: block;
    transition: var(--transition-time) ease;
    transform: scale(1);
}
.w-card__text {
    grid-area: w-card__text;
    padding: 20px;
}
.projects__item .card {
    height: 100%;
}
.card:hover .card__img{
    transform: scale(1.01);
    filter: brightness(75%);
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
}

Эти карточки находятся в grid-контейнере со свойством grid-template-columns: repeat(auto-fill, minmax(300px, auto)) и они соответственно растягиваются, сжимаются и меняют количество в ряду в зависимости от экрана. Чтобы картинки вписывались в блок применил object-fit: cover; overflow: hidden и картинкам width: 100%. Все работает, но: при наведении картинки должны немного и плавно увеличиваться (при снятии наведения принять первоначальный размер). Применил transform: scale(1.01); transition: 0.3s. И вот теперь проблема: при снятии наведения картинка принимает своё исходное состояние, однако при рандомных обстоятельствах в конце трансформации дергается, как будто заново подравнивается под блок. При чем закономерности я проследить не смог. Одни и те же картинки, стоящие рядом ведут себя по разному даже при том, что у них одинаковые ширина/высота/текстовая часть. Например 3 одинаковые картинки в ряд (карточки в ряд), одна дергается вниз, другая вверх-влево, третья не дергается вообще. Знаю, что object-fit не анимируется, но ведь какие-то картинки не дергаются, значит свойства "могут" правильно работать. В чем может быть причина такого поведения и как тогда реализовать это правильно? Можно даже на JS. Заранее спасибо.