:root {
        --cards: 3;
        --cardHeight: 70vh;
        --cardTopPadding: 1.5em;
        --cardMargin: 2vw;
    }
    #card1 {
        --index: 1;
    }
    #card2 {
        --index: 2;
    }
    #card3 {
        --index: 3;
    }
    #cards {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--cards), var(--cardHeight));
        gap: var(--cardMargin);
        padding-bottom: calc(var(--cards) * var(--cardTopPadding));
        margin-bottom: var(--cardMargin);
    }
    .card {
        position: sticky;
        top: 0;
        padding-top: calc(var(--index) * var(--cardTopPadding));
    }
    #card1 .card-body  *{
        color: white;
    }
    #card2 .card-body {
    }
    #card3 .card-body {
    }

    .card-body {
        box-sizing: border-box;
        height: var(--cardHeight);
        transition: all 0.5s;
    }
    @media screen and (max-width: 768px) {
        .card {
            top:120px;
        }
        .card-body {
            height: auto;
            padding-top: 50px;
        }
        #cards {
            grid-template-rows: repeat(var(--cards), 1fr);
            padding-bottom: 0;
        }
    }