.mode-cards{gap:var(--space-l);margin:0;flex-direction:column;width:100%;max-width:1120px;margin-inline:auto;padding:0;list-style:none;display:flex}.mode-cards__card{align-items:center;gap:var(--space-xl);padding:var(--space-l);border-radius:var(--border-radius-xl);background:color-mix(in srgb,var(--color-primary) 8%,var(--color-background));flex-wrap:wrap;transition:background .25s,translate .25s;display:flex}.mode-cards__card:hover{background:color-mix(in srgb,var(--color-primary) 16%,var(--color-background));translate:0 -3px}.mode-cards__art{align-items:center;gap:var(--space-s);flex-direction:column;flex:none;display:flex}.mode-cards__art .phone-frame{--phone-frame-width:180px}.mode-cards__level{padding:var(--space-xs,.35em) var(--space-s);border-radius:var(--border-radius-l);background:var(--color-primary);color:var(--color-primary-text);font-size:var(--font-size-xs);text-align:center;font-weight:700}.mode-cards__body{gap:var(--space-s);flex-direction:column;flex:min(100%,26rem);display:flex}.mode-cards__title{font-size:var(--font-size-xl)}.mode-cards__summary{color:color-mix(in srgb,var(--color-foreground),transparent 10%);font-weight:600}.mode-cards__text{color:color-mix(in srgb,var(--color-foreground),transparent 25%);max-width:60ch}.mode-cards__facts{gap:var(--space-s) var(--space-l);margin:var(--space-xs,.4em) 0;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));display:grid}.mode-cards__fact-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--color-foreground),transparent 55%)}.mode-cards__fact-value{font-size:var(--font-size-s);margin:0}.mode-cards__changes{gap:var(--space-xs,.4em);padding-left:var(--space);flex-direction:column;margin:0;display:flex}.mode-cards__change{font-size:var(--font-size-s);color:color-mix(in srgb,var(--color-foreground),transparent 30%);list-style-type:disc}.mode-cards__link{color:var(--color-foreground);margin-top:var(--space-xs,.4em);align-self:flex-start;font-weight:700;text-decoration:none}.mode-cards__link:after{content:" →"}.mode-cards__link--quiet{color:color-mix(in srgb,var(--color-foreground),transparent 55%);font-weight:400}.mode-cards__link--quiet:after{content:""}@media (width<=720px){.mode-cards__card{gap:var(--space-l)}.mode-cards__art{align-items:center;gap:var(--space);flex-direction:row}.mode-cards__art .phone-frame{--phone-frame-width:128px}}