.cgrid__head{max-width:22ch}.cgrid__intro{max-width:56ch;color:var(--color-ink-2);margin-top:20px}.cgrid__container{margin-top:48px;container:carousel-grid/inline-size}.cgrid{--cols:1.12;--width:calc((100cqi + var(--gap-card)) / var(--cols));row-gap:var(--gap-card);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0;margin-inline:calc(var(--gutter) * -1);padding:0;padding-inline:calc(var(--gutter) - var(--gap-card) / 2);scroll-padding-inline:calc(var(--gutter) - var(--gap-card) / 2);flex-wrap:nowrap;margin-block:-8px;padding-block:8px;list-style:none;display:flex;overflow-x:auto}.cgrid::-webkit-scrollbar{display:none}.cgrid:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:-2px}.cgrid__cell{width:var(--width);box-sizing:border-box;padding-inline:calc(var(--gap-card) / 2);scroll-snap-align:start;scroll-snap-stop:normal;flex:none;display:flex}@container carousel-grid (min-width:30rem){.cgrid{--cols:2.15}.cgrid__cell{scroll-snap-align:none}.cgrid__cell:nth-child(odd){scroll-snap-align:start}}@container carousel-grid (min-width:42rem){.cgrid{--cols:3;scroll-snap-type:none;margin-inline:calc(var(--gap-card) / -2);flex-wrap:wrap;padding-inline:0;overflow-x:visible}.cgrid__cell,.cgrid__cell:nth-child(odd){scroll-snap-align:none}}@container carousel-grid (min-width:64rem){.cgrid{--cols:4}}.ucard{border-radius:var(--radius-card);background:var(--color-surface-recessed);min-width:0;color:var(--color-ink);flex-direction:column;flex:1;gap:10px;padding:24px;display:flex}@media (min-width:63.75rem){.ucard{padding:28px}}.ucard__title{text-wrap:balance}.ucard__what{color:var(--color-ink-2);text-wrap:pretty}.ucard__foot{color:var(--color-ink-3);align-items:baseline;gap:16px;margin-top:auto;padding-top:16px;display:flex}.ucard__arrow{width:1em;height:1em;font-size:var(--text-body);color:var(--color-ink);flex:none;margin-inline-start:auto;line-height:1;display:inline-block;position:relative;overflow:hidden}.ucard__arrow:after{content:"→";text-align:left;width:1em;transition:transform var(--dur-state) var(--ease-default);line-height:1em;display:block;position:absolute;inset:0;transform:translate(-100%)}.ucard:hover .ucard__arrow:after,.ucard:focus-visible .ucard__arrow:after{transform:translate(0)}@container carousel-grid not (min-width:42rem){.ucard{content-visibility:auto;contain-intrinsic-size:auto 220px}}@media (prefers-reduced-motion:reduce){.ucard__arrow:after{opacity:0;transition:opacity var(--dur-state) var(--ease-default);transform:translate(0)}.ucard:hover .ucard__arrow:after,.ucard:focus-visible .ucard__arrow:after{opacity:1}}