:root{--card-height:auto;--card-margin:1px;--card-top-offset:0;--numcards:4;--outline-width:0}
#cards{list-style:none;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(var(--numcards),var(--card-height));gap:var(--card-margin);padding-bottom:calc(var(--numcards) * var(--card-top-offset));margin-bottom:var(--card-margin)}
#card-1{--index:1}
#card-2{--index:2}
#card-3{--index:3}
#card-4{--index:4}
.card{position:sticky;top:0;padding-top:calc(var(--index) * var(--card-top-offset))}
.card-content{overflow:hidden}
.card-content>div{grid-area:text;width:95%;max-width:800px;place-self:center;text-align:left;display:grid;gap:1em;place-items:start}
.card{--index0:calc(var(--index) - 1);--reverse-index:calc(var(--numcards) - var(--index0));--reverse-index0:calc(var(--reverse-index) - 1)}
.card__content{transform-origin:50% 0;will-change:transform;--duration:calc(var(--reverse-index0) * 1s);--delay:calc(var(--index0) * 1s);animation:var(--duration) linear scale var(--delay) forwards;animation-timeline:cards-element-scrolls-in-body}
@keyframes scale {
to{transform:scale(calc(1.1 - calc(0.1 * var(--reverse-index))))}
}
.siana,.siana2,.sianta,.sianta2{position:relative;}
.pt-left,.pt-right{display:none;}
@media(min-width:992px){
.siana{padding:25px;}
.siana2{padding:25px;}
.siana::before,.siana::after,.siana2::before,.siana2::after{content:'';position:absolute;background:var(--main-color3);border-radius:5px;z-index:-1;}
.siana::before{left:10px;top:10px;width:40%;height:20%;;background:var(--main-color2);}
.siana2::before{right:10px;top:10px;width:40%;height:20%;background:var(--main-color2);}
.siana::after{right:0;bottom:0;width:70%;height:60%;}
.siana2::after{left:0;bottom:0;width:70%;height:60%;}
.pt-left{display:block;position:absolute;width:110px;opacity:.04;left:-80px}
.pt-right{display:block;position:absolute;width:110px;opacity:.04;right:-80px}
}