:root{--cards-grid-gap:clamp(1.25rem,4vw,2rem);--card-border-radius:1rem;--card-background:var(--color-blue-800);--card-color:var(--color-blue-300);--card-box-shadow:0 4px 8px rgba(0,0,0,.1)}.cards-centered{& .wrapper{--wrapper-width:64rem}}.cards-wrapper{.cards-columns &{display:flex;flex-direction:column;gap:7rem;@media (min-width:1024px){flex-direction:row;gap:4rem}&>div{flex:1 1 0}}.cards-centered &{display:flex;flex-direction:column;gap:clamp(1rem,4vw,4rem);&>div{flex:1 1 0}}}.cards-grid-wrapper{--card-width:12rem;display:grid;grid-gap:var(--cards-grid-gap);grid-template-columns:repeat(auto-fill,minmax(var(--card-width),1fr));@media (min-width:1200px){--card-width:15rem}.cards-centered &{--card-width:15rem}}.card{--text-color:var(--color-white);--heading-color:var(--card-color);align-items:center;animation:fadeIn ease-in-out forwards;background-color:var(--card-background);border-radius:var(--card-border-radius);color:var(--text-color);display:flex;flex-direction:column;height:auto;justify-content:center;overflow:clip;text-align:center;animation-timeline:view();animation-range:var(--transition-start) var(--transition-end);.cards-columns &{@supports (view-transition-name:none){@media (min-width:1024px){aspect-ratio:1}}}}.card-content{display:flex;flex-direction:column;justify-content:flex-start;padding:1.5rem;.cards-centered &{padding:clamp(2.5rem,4vw,4.5rem) 1.5rem}}.card-number{margin-bottom:1rem;--heading-color:var(--card-color)!important;.cards-columns &{font-size:clamp(3.125rem,5vw,5.25rem)}}.card-text p{margin-bottom:0}