:root{--card-height:auto;--card-margin:1px;--card-top-offset:0;--numcards:4;--outline-width:0}
.mrmark{display:flex;flex-direction:column;justify-content:flex-start;height:70vh}
.marquee{position:relative;top:0;left:0;width:100%;height:150px;display:block;transform-origin:50% 100%;transition:transform .25s}
.marquee .inner{position:absolute;top:0;left:0;display:flex;align-items:flex-end;color:var(--whiteColor);font-size:10rem;white-space:nowrap;text-transform:uppercase;font-weight: bolder;line-height:1;opacity: .9;}
.marquee .inner p{margin:0}
.marquee .inner>*{padding:0 1rem}
.icircle{margin:0;width:120px;height:120px;border-radius: 50%;background:var(--main-color);}

@media(min-width:1400px){
.mrmark{min-height:680px}
}

@media(max-width:1399px){
.mrmark{height:80vh}
.marquee{height:130px}
.marquee .inner{font-size:9rem;}
.icircle{width:110px;height:110px;}
}
@media(max-width:1199px){
.mrmark{height:550px}
.marquee{height:100px}
.marquee .inner{font-size:7rem;}
.icircle{width:80px;height:80px;}
}
@media(max-width:767px){
.mrmark{height:480px}
.marquee{height:90px;}
.marquee .inner{font-size:6.5rem;}
.icircle{width:70px;height:70px;}
}
@media(max-width:575px){
.mrmark{height:400px}
.marquee{height:60px;}
.marquee .inner{font-size:4rem;}
.icircle{width:50px;height:50px;}
}
.rounded-5{border-radius:20px}
@media(min-width:992px){
.biggy{width:115%;right:15%;position: relative;}
}
.ribbon{position:absolute;left:0;top:50px;width:60px;}


#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}
.cardio{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}
.cardio{--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))))}
}