.guide-list { display: grid; gap: 0; list-style: none; padding: 0; border-top: 2px solid var(--ink); } .guide-list li { border-bottom: 1px solid var(--sand-line); } .guide-list a { display: grid; gap: 0.45rem; padding-block: clamp(1.5rem, 3vw, 2rem); text-decoration: none; color: var(--ink); } .guide-list a:hover .g-title { color: var(--riff); } .g-tag { font-size: 0.82rem; font-weight: 500; letter-spacing: -0.006em; color: var(--riff); } .g-title { max-width: 28ch; } .g-sum { color: var(--ink-soft); max-width: var(--measure-prose); font-size: 1.0625rem; line-height: 1.55; } .g-meta { margin-top: 0.2rem; } @media (max-width: 47.99rem) { .guide-list a { grid-template-columns: 1fr auto; grid-template-areas: 'tag meta' 'title title' 'sum sum'; align-items: baseline; column-gap: 1rem; } .g-tag { grid-area: tag; } .g-title { grid-area: title; } .g-sum { grid-area: sum; } .g-meta { grid-area: meta; margin-top: 0; text-align: right; } }