html {
    scroll-behavior: smooth;
}

.swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ============================= */
/* START - Cards stack */
/* ============================= */
.cards-stack {
    position: relative;
    display: flex;
    gap: calc(var(--spacing) * 16);
    --carousel-height: 675px;

    @media screen and (max-width: 1280px) {
        --carousel-height: 991px;
    }
    @media screen and (max-width: 991px) {
        --carousel-height: 1280px;
    }

    .cards-stack-list {
        --scale: 0.005;
        --card-spacing: .5rem;

        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;

        div.post-card {
            position: sticky;
            aspect-ratio: 16/7;
            padding: calc(var(--spacing) * 16);
            height: var(--carousel-height);
            border-radius: var(--radius-semilarge);
            scale: calc(1 + (var(--index) * var(--scale)));
            top: calc(4rem + calc(var(--index) * var(--card-spacing)));
            margin-bottom: calc(calc(var(--card-spacing) * 4) * calc(1 + (var(--index) * var(--scale))));

            @media screen and (max-width: 1280px) {
                position: relative;
                aspect-ratio: unset;
                height: auto;
                top: unset;
                margin-bottom: unset;
            }
        }

        &>div:nth-of-type(2n) {
            background-color: var(--color-primary-light);
        }

        &>div:nth-of-type(2n+1) {
            background-color: var(--color-lighter-gray);
        }
    }

    .cards-stack-pagination {
        position: sticky;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /*justify-content: center;*/
        gap: calc(var(--spacing) * 4);
        flex-shrink: 0;
        color: var(--color-primary-dark);
        margin-top: calc(var(--spacing) * 64);
        top: calc(var(--spacing) * 64);

        @media screen and (max-width: 1280px) {
            display: none;
        }

        div {
            background-color: var(--color-light-gray);
            border-radius: var(--radius-semilarge);
        }

        div.active {
            background-color: var(--color-primary);
        }
    }
}

/* ============================= */
/* END - Cards stack */
/* ============================= */