CSS transform:scale() break z-index

Question

https://codepen.io/f2t3m/pen/bGYrdro?editors=1111

My problem is simple. I need to use the css property transform:scale, but it breaks the z-index. I want the car to be hidden and because of transform:scale, it's not. I reproduced my issue on codepen so you can exactly see what I'm talking about. Just remove/add the transform:scale css line to see what I'm talking about.

Any idea how to make the car behind the other image, even while using the scale property?

edit: I prefer to not make any change in HTML code if possible, only CSS

HTML:

<div class="card">
  <span class="illustration"></span>
</div>

CSS:

.card {
  transform: scale(0.9);
  background-size: contain;
    background-repeat: no-repeat;
  background-image: url("https://www.imgacademy.com/themes/custom/imgacademy/images/helpbox-contact.jpg");
   width:500px;
  height:500px;
}

.illustration {
  background-image: url("https://www.ajiauto.com/wp-content/uploads/2021/12/bmw-3-series-2021-prix-maroc.jpg12-798x466.jpg");
  position:absolute;
  width:400px;
  height:400px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index:-1;
}