/***************************************
 * Stacking Cards
***************************************/
.vii-stacking-cards {
    --count:4;
    --spacing-top:80px;
    --header-height:135px;
    --height-item:100vh;
}

/* heading */
.vii-stacking-cards__heading {top:calc(var(--vii-spacing-56) + var(--admin-bar-height));}
.vii-stacking-cards__heading-inner {max-width:761px; }
.vii-stacking-cards__heading .vii-stacking-cards__item {
    transform:rotate(4deg); position:relative;
}

/* item */
.vii-stacking-cards__item {
    --index:0;

    width:calc(var(--vii-container) / 4);
}
.vii-stacking-cards__item-inner {
    padding:22px;
    box-shadow:0 8px 17px rgba(0, 0, 0, .06), 0 30px 30px rgba(0, 0, 0, .05),
    0 69px 41px rgba(0, 0, 0, .03), 0 122px 49px rgba(0, 0, 0, .01);
}
.vii-stacking-cards__item-inner:before {
    content:"";
    width:31px; aspect-ratio:31/41; background:var(--vii-color-pink); border-radius:var(--vii-radius-4);
    position:absolute; top:-27px; left:50%; transform:translateX(-50%);
}
.vii-stacking-cards__item-image {aspect-ratio:297/197;}
.vii-stacking-cards__items {
    max-width:calc(var(--vii-container) * var(--count) / 4);
    margin-left:auto; margin-right:auto;
}

/* sticky */
.vii-stacking-cards__items .vii-stacking-cards__item {top:calc(var(--vii-spacing-56) + var(--header-height) + var(--vii-spacing-48) + var(--admin-bar-height));}

/* layout more items */
.vii-stacking-cards:not(.has-1-items):has(.vii-stacking-cards__heading) .vii-stacking-cards__items {margin-top:50vh;}


/* Layout special > has 1 items */
.vii-stacking-cards.has-1-items .vii-stacking-cards__heading {position:static}
.vii-stacking-cards.has-1-items .vii-stacking-cards__item {
    max-width:440px; margin-left:auto; margin-right:auto;
}

/* special layout > no heading */
.vii-stacking-cards:not(:has(.vii-stacking-cards__heading-inner)) .vii-stacking-cards__items .vii-stacking-cards__item {
    top:calc(var(--vii-spacing-56) + var(--admin-bar-height));
}

/* large screen */
@media only screen and (min-width:1025px) {
    .vii-stacking-cards__items .vii-stacking-cards__item:nth-child(odd) {
        transform:translateX(calc(100% * var(--index))) rotate(-4deg);
    }
    .vii-stacking-cards__items .vii-stacking-cards__item:nth-child(even) {
        transform:translateX(calc(100% * var(--index) - 8px)) rotate(4deg)
    }
    .vii-stacking-cards__heading .vii-stacking-cards__item {
        transform:rotate(4deg); position:relative;
        margin-left:calc((var(--vii-container) - var(--vii-container) * var(--count) / 4)/2);
    }
}


/***************************************
 * Stacking Cards - Responsive
***************************************/
@media only screen and (max-width:1024px) {
    .vii-stacking-cards__item {
        width:100%; max-width:460px;
        margin-left:auto; margin-right:auto; padding:0 10px;
    }
    .vii-stacking-cards__items .vii-stacking-cards__item {
        margin-top:20vh;
        top:calc(var(--vii-spacing-56) + var(--header-height) + var(--vii-spacing-48) + var(--admin-bar-height) + var(--index) * 40px);
    }
    .vii-stacking-cards__items .vii-stacking-cards__item:nth-child(odd) {transform:rotate(2deg)}
    .vii-stacking-cards__items .vii-stacking-cards__item:nth-child(even),
    .vii-stacking-cards__heading .vii-stacking-cards__item {transform:rotate(-2deg)}
}