/* Components of this guide; colours and radii come from the Content UI Kit tokens (--mcui-*). */
.blog-wrapper :is(h2, h3)[id] { scroll-margin-block-start: 7rem; }
.wsg-gem { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--mcui-line, rgb(175 181 207 / .12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); }
.blog-wrapper img.wsg-gem__icon { inline-size: 3.2rem; block-size: auto; border-radius: 0; }
.blog-wrapper .wsg-gem p { margin: 0; }
.wsg-gem__name { font-weight: 700; color: var(--mcui-ink, #eff0f5); }
.wsg-gem__flavor { font-style: italic; color: var(--mcui-muted, #afb5cf); }