Подскажите пожалуйста, с чем связано не ровное увеличение картинки при наведении?

.cards {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, 245px);
  grid-template-rows: repeat(1, 210px);
  justify-content: space-between;
  align-items: center;
}

.post_card {
  width: 245px;
  height: 200px;
  position: relative;
  margin-bottom: 1em;
  overflow: hidden;
}

.webe {
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
  border: 1px solid #EFEFEF;
  transition: 1s;
  display: inline-block;
  /* Строчно-блочный элемент*/
  overflow: hidden;
}

.webe img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.post_card .webe:hover img {
  transform:  translate(-50%, -50%) scale(1.3);
}

.post_card .webe img {
  transition: 1s;
}

.post_card .webe {
  overflow: hidden;
}

<div class="cards">
  <div class="card-demo sale-1">
    <div class="post_card">
      <a href="#">
        <div class="webe"><img src="images/toyota.png" width=240 height=140></div>
      </a>
    </div>
  </div>


  <div class="card-demo sale-1">
    <div class="post_card">
      <a href="#">
        <div class="webe"><img src="images/lada.png" width=243 height=140></div>
      </a>
    </div>
  </div>

  <div class="card-demo sale-1">
    <div class="post_card">
      <a href="#">
        <div class="webe"><img src="images/skoda.jpg" width=243 height=160></div>
      </a>
    </div>
  </div>

  <div class="card-demo sale-1">
    <div class="post_card">
      <a href="#">
        <div class="webe"><img src="images/KIA.png" width=220 height=120></div>
      </a>
    </div>
  </div>
</div>