/*
 * Stacking cards: the service cards of a group "stacking-cards" ("stacking-card" each) stay at the
 * top while the next one scrolls over them — from 1025px on; script.js gives each card its
 * --stack-index and the group is-stacking-ready. Below that they are ordinary blocks.
 */

.stacking-cards {
    --stack-top: 80px;
    position: relative;
    isolation: isolate;
}

@container (min-width: 1025px) {
    .stacking-cards.is-stacking-ready .stacking-card {
        position: sticky;
        top: var(--stack-top);
        z-index: calc(10 + var(--stack-index));
    }
}

/*
 * Up to 1400px the cards' own top margin (mcg-margin-top-100px) is see-through: once a card sticks,
 * the one before shows through it. There the cards follow each other without it.
 */
@container (min-width: 1025px) and (max-width: 1400px) {
    .stacking-cards > .stacking-card + .stacking-card {
        margin-top: 0;
    }
}