/**
 * .right-grade pinned stacking cards — GSAP-driven (see
 * right-grade-stack.js). Mirrors the proven pattern already validated in
 * about-hero-stack.css / sixgrades-stack.css: one ScrollTrigger pins the
 * whole section, one timeline (scrubbed) moves each card in turn,
 * full-height cards fully cover the previous one.
 *
 * The section itself is pinned (not just .right-grade__grid), so
 * .right-grade__head and the background stay on screen, untouched by the
 * timeline, for as long as the cards are stacking on top of one another.
 *
 * style.css itself is never edited for this effect — the JS sets each
 * card's position/size via gsap.set() (equivalent to inline styles), so
 * this file only needs to guarantee the stacking context / paint order is
 * correct; it does not redefine size, background, or typography, all of
 * which stay exactly as style.css already defines them for .right-grade__item.
 */
.right-grade {
	position: relative;
}
.right-grade__grid {
	position: relative;
	overflow: hidden;
}