.guide { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); } .guide-head { display: grid; gap: var(--head-stack); margin-bottom: clamp(2rem, 4vw, 3rem); } .guide-crumb { font-size: 0.82rem; font-weight: 500; letter-spacing: -0.006em; color: var(--ink-faint); } .guide-crumb a { color: var(--riff); } .guide-crumb a { text-decoration: none; } .guide-crumb a:hover { text-decoration: underline; } .guide-crumb span { color: var(--sand-line); margin-inline: 0.3rem; } .guide-lede { max-width: var(--measure-lede); } .guide-meta { margin-top: 0.25rem; } .more-head { margin-bottom: 1.5rem; } .more-list { display: grid; gap: 1px; background: var(--sand-line); border-block: 1px solid var(--sand-line); list-style: none; padding: 0; } .more-list li { background: var(--paper); } .more-list a { display: grid; gap: 0.3rem; padding: 1.25rem 0.25rem; text-decoration: none; color: var(--ink); } .more-list a:hover .more-title { color: var(--riff); } .more-tag { font-size: 0.82rem; font-weight: 500; letter-spacing: -0.006em; color: var(--riff); } .more-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; } .more-sum { max-width: var(--measure-prose); } @media (min-width: 56rem) { .more-list { grid-template-columns: repeat(3, 1fr); } .more-list a { padding: var(--pad-cell); } @supports (grid-template-rows: subgrid) { .more-list { grid-template-rows: auto auto auto; } .more-list > li, .more-list > li > a { display: grid; grid-row: span 3; grid-template-rows: subgrid; } } } @media (max-width: 47.99rem) { .guide { padding-top: 2rem; } .guide-crumb a { position: relative; } .guide-crumb a::after { content: ''; position: absolute; inset: -0.82rem -0.4rem; } .more-sum { font-size: 1rem; } } .guide-kort { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--pos); background: var(--paper-raise); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.0625rem; line-height: 1.55; max-width: var(--measure-prose); }