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

let galleryCards = document.querySelectorAll('.gallery__card')
// 
for (let card of galleryCards) {
  card.addEventListener('click', function() {
    console.log('click')
    deleteActiveClass()
    card.classList.add('activeCard')
  })
}
// 
function deleteActiveClass() {
  for (let card of galleryCards) {
    card.classList.remove('activeCard')
  }
}

.gallery {
  .gallery__wrapper {
    display: flex;
    .gallery__card {
      cursor: pointer;
      position: relative;
      flex: 1;
      padding-bottom: 50vh;
      transition: all 0.5s ease-in-out;
      .card-img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }
  }
}

.gallery__card.activeCard {
  flex: 7;
}

<section class="gallery">
      <div class="gallery__wrapper">
        <div class="gallery__card"><img src="img/car-1.jpg" alt="car" class="card-img"></div>
        <div class="gallery__card"><img src="img/car-2.jpg" alt="car" class="card-img"></div>
        <div class="gallery__card"><img src="img/car-3.jpg" alt="car" class="card-img"></div>
        <div class="gallery__card"><img src="img/car-4.jpg" alt="car" class="card-img"></div>
        <div class="gallery__card"><img src="img/car-5.jpg" alt="car" class="card-img"></div>
      </div>
</section>