:root{--cards:3;--cardHeight:20rem;--cardTopPadding:1.5em;--cardMargin:4vw}@media (max-width:768px){:root{--cardHeight:19rem}}@media (min-width:1200px){:root{--cardHeight:16rem}}#cards{grid-template-columns:1fr;grid-template-rows:repeat(var(--cards), var(--cardHeight));gap:var(--cardMargin);padding-left:0;padding-bottom:calc(var(--cards) * var(--cardTopPadding));margin-bottom:var(--cardMargin);list-style:none;display:grid}#card1{--index:1}#card2{--index:2}#card3{--index:3}#card4{--index:4}.card{padding-top:calc(var(--index) * var(--cardTopPadding));position:sticky;top:0}.card-body{box-sizing:border-box;height:var(--cardHeight);transition:all .5s}