.flow { display: grid; gap: 0.85rem; counter-reset: f; list-style: none; padding: 0; max-width: 42ch; } .flow li { counter-increment: f; position: relative; padding-left: 2.45rem; min-height: 1.55rem; color: var(--ink-soft); } .flow li::before { content: counter(f); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--riff); border: 1px solid var(--riff); border-radius: 50%; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; } .flow span { color: var(--ink); font-weight: 500; } .cats { display: grid; gap: 1px; background: var(--sand-line); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--sand-line); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .cat { background: var(--paper); padding: var(--pad-cell); display: grid; gap: 0.3rem; align-content: start; } .cat-note { margin-top: 1.25rem; max-width: var(--measure-fine); } .km { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 50rem) { .km-has-figure { grid-template-columns: auto 1fr; gap: 4rem; } } .km-num { font-size: clamp(2.9rem, 8vw, 4.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; } .km-unit { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.6rem; opacity: 0.72; } .km-text { display: grid; gap: var(--head-stack); justify-items: start; } .km-text p { max-width: 48ch; } @media (max-width: 47.99rem) { .cats { gap: 0; background: none; border: 0; border-radius: 0; } .cat { background: none; padding: 0.85rem 0; border-top: 1px solid var(--sand-line); } .cat:first-child { border-top: 0; padding-top: 0; } .cat-note { margin-top: 1.6rem; } .flow li::before { font-size: 0.75rem; } .fine .field-ref { font-size: 0.78rem; } .km-num { font-size: 3.5rem; } .km { gap: 1.5rem; } } @media (min-width: 60rem) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }