css – Carousel con cards centradas

Tengo un ligero problema de css que le molesta a mi TOC, tengo un Carousel de cards en la que se ven de 3 en 3, pero no tengo forma de cuadrarlas totalmente céntricas en el marco contenedor:

const carousel = document.querySelector('.index-selector'),
        track = document.querySelector('.cards-content'),
        next = document.querySelector('.right_side'),
        prev = document.querySelector('.left_side');
    let width = carousel.offsetWidth,
        index = 0,
        max = Math.round(document.querySelectorAll('.card').length/3);

        console.log(max);

    window.addEventListener("resize", function(){
        width = carousel.offsetWidth;
    });

    next.addEventListener('click', function(e){
        e.preventDefault();
        index = index + 1;
        if(index == max){
            index = 0;
            track.style.transform = 'translateX('+index * -width + 'px)';
        }
        
        track.style.transform = 'translateX('+index * -width + 'px)';
    });
    prev.addEventListener('click', function(e){
        index = index - 1;
        console.log(index);
        if(index < 0){
            index = max-1;
            track.style.transform = 'translateX('+index * -width + 'px)';
        }
        
        track.style.transform = 'translateX('+index * -width + 'px)';
    });
.index-selector{
    width: 1500px;
    height: 500px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    margin: 10px auto 50px auto;
}

.cards-content{
    width: 1500px;
    height: 500px;
    display: inline-flex;
    transition: transform 1s ease-in-out;
}

.card{
    width: 450px;
    height: 460px;
    margin:0px 30px;
    border-top: 20px solid #000;
    border-bottom: 20px solid #000;
    border-radius: 15px;
    background-color: var(--color-hbg);
    transition: 1s;
    float: left;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
    cursor: pointer;
    flex-shrink: 0;
}

.card:hover{
    transform: scale(1.05);
    transition: 1s;
}

.card-img{
    width: 400px;
    height: 430px;
    margin: 15px auto;
    border-radius: 5px;
    position: relative;
    background-color: var(--color-bg);
    transition: 1s;
}

.card-img img{
    width: 400px;
    height: 430px;
    border-radius: 5px;
}

.card-title h2{
    width: 400px;
    height: 35px;
    padding: 15px 0;
    position: absolute;
    bottom: -20px;
    border-radius: 0 0 5px 5px;
    color: #F4F4F4;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.stepping{
    width: 24px;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.stepping span.material-icons{
    visibility: visible;
    position: absolute;
    top: 250px;
    background-color: transparent;
    color: var(--color-text);
    transition: 1s;
}

.stepping:hover{
    background-color: rgba(0, 0, 0, 0.3);
}

.stepping:hover > span{
    visibility: visible;
}

.left_side{
    top: 0;
    left: 0;
}

.right_side{
    top: 0;
    right: 0;
}
<div class="index-selector">
  <div class="cards-content">
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="https://es.stackoverflow.com/assets/_img/pruebas1.svg">
          <div class="card-title">
            <h2>Hola soy Aaron</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas2.svg">
          <div class="card-title">
            <h2>Yo tambien lo soy</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="card">
        <div class="card-img"><img loading="lazy" src="assets/_img/pruebas3.svg">
          <div class="card-title">
            <h2>Texto de prueba 3</h2>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div class="stepping left_side"><span class="material-icons md-24">arrow_back_ios_new</span></div>
  <div class="stepping right_side"><span class="material-icons md-24">arrow_forward_ios</span></div>
</div>

En el snippet se muestra un esquema de cómo queda de descentrado. En la posición inicial, la tercera card está más cerca dela derecha que la primera de la izquierda, me gustaría saber cómo puedo centrar las 3 card en el visor de contenido.

PD: pongo el js porque las card, al moverse, pueden desclocarse.