css/stack.css

:root {
  --cards: 3;
  --cardTopPadding: 6rem;
  --cardsHeaderBottomPadding: 24rem;
  --cardsSectionGap: 2rem;
  --cardMargin: 2rem;
  --cardsSectionPaddingBottom: calc(
    calc(var(--cards) - 1) * var(--cardTopPadding)
  );
  --cardsHeaderBottomStop: 448px;
}

#stacked-cards {
  list-style: none;
  padding-left: 0;
  gap: var(--cardMargin);
  padding-bottom: calc(calc(var(--cards) - 1) * var(--cardTopPadding));

  display: flex;
  flex-direction: column;
}

#stacked-cards > div:nth-child(1) {
  --index: 0;
}
#stacked-cards > div:nth-child(2) {
  --index: 1;
}
#stacked-cards > div:nth-child(3) {
  --index: 2;
}

#stacked-cards > div {
  transform-origin: bottom;
  position: sticky;
  top: 0;
}

@media screen and (max-width: 1024px) {
  :root {
    --cardTopPadding: 3rem;
    --cardsHeaderBottomPadding: 10rem;
    --cardsSectionGap: 4rem;
    --cardsHeaderBottomStop: 272px;
  }
}