/* Virtual grid draft (grid.html). Loaded after the site's styles.css. */
.grid-banner { line-height: 1.55; }
.grid-banner strong { display: block; margin-bottom: 6px; }
.grid-page h2 { margin-bottom: 8px; }
.grid-steps { margin: 0 0 16px; color: var(--muted, #9aa6ad); font-size: 0.86rem; line-height: 1.5; }
.grid-steps span { color: var(--text, #e8eef2); font-weight: 700; }
.grid-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-body img { width: 100%; height: auto; border-radius: 12px; }
.grid-captions { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.45; }
.grid-captions li { padding: 8px 10px; border: 1px solid var(--line, #2a343c); border-radius: 8px; }
.grid-captions strong { display: inline-block; min-width: 4.5em; margin-right: 6px; }
@media (max-width: 820px) {
  .grid-body { grid-template-columns: 1fr; }
}