Create Jumping Stack of Cards using CSS and JavaScript

I have stack of cards where on click; the cards will change to the next card behind and so on.

I want to achieve two things here:

1. The cards appear to be in the left and overflows to the left div, it does not align in the middle of the parent div, how to I make the cards to be in its own div?

2. Please how do I make the cards to automatically change to the next card behind without clicking on the card to change? And I also want the change animation to swap below when the card changes.

 CSS

<style type="text/css">
     .flipcard {
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 100;
        transform-style: preserve-3d;
    }
   .innercard {
        position: absolute;
        height: 250px;
        width: 100%;
        border-radius: 15px;
        backdrop-filter: blur(25px);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backface-visibility: hidden;
        text-align: center;
        font-size: 2rem;
        transform: translate(-50%, -50%);
        justify-content: center;
        align-content: center;
    }
    .innercard:nth-last-child(n + 3) {
        --y: calc(-50% - 25px);
        transform: translate(-50%, var(--y)) scale(0.95);
        box-shadow: 0 0 1px 1px #00000003;
    }
    .innercard:nth-last-child(2) {
        --y: calc(-50% - 10px);
        transform: translate(-50%, var(--y)) scale(1);
    }
    .innercard:nth-last-child(1) {
        --y: calc(-50% + 10px);
        transform: translate(-50%, var(--y)) scale(1.05);
    }
    @keyframes swap {
        50% {
            transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg);
            animation-timing-function: ease-in;
        }
        100% {
             transform: translate(-50%, calc(var(--y) -15px)) scale(0.85);
             z-index: -1;
        }
    }
</style>

HTML

<div class="subbottom" style="background-color: #011b33;">
    <br />
    <div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
        <div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
            <div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
                <div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                    <span style="margin: 0 auto;">This is the second Div header</span>
                </div>
            </div>
            <div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
        </div>
        <div class="row" style="width: 100%; margin: 0 auto;">
            <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
                <div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                    <h5 style="color: #1bb6f4;">Div Sub Header</h5>
                    <label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
                </div>
            </div>
            <div class="col-sm-1" style="margin: 0 auto;"></div>
            <div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
                <div class="sect">
                    <div class="flipcard">
                        <div class="innercard font-face">FRONT CARD 1</div>
                        <div class="innercard font-face">FRONT CARD 2</div>
                        <div class="innercard font-face">FRONT CARD 3</div>
                    </div>
                </div>
            </div>
            <br />
        </div>
        <br />
    </div>
    <br />
</div>

JavaScript

<script>
    let flipcard = document.querySelector(".flipcard");
 
    [...flipcard.children].reverse().forEach(i => flipcard.append(i));
 
    flipcard.addEventListener("click", swap);
 
    function swap(e) {
        let innercard = document.querySelector(".innercard:last-child");
        if (e.target !== innercard) return;
        innercard.style.animation = "swap 700ms forwards";
 
        setTimeout(() => {
            innercard.style.animation = "";
            flipcard.prepend(innercard);
        }, 700);
    }
</script>