/* Блок главной «Чёрно-белая или цветная»: слева выбор подборки, справа малина, которая перекрашивается. */
/* обёртка задаёт длину скролла, блок внутри прилипает к экрану, пока малина не доиграет */
.vg-versions-pin{--vg-head:64px;position:relative;height:320vh}
.vg-versions{position:sticky;top:0;height:100vh;height:100dvh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;align-content:center;padding-block:calc(var(--vg-head) + 12px) 24px}
.vg-versions-text{display:flex;flex-direction:column;gap:18px;min-width:0}
.vg-versions-eyebrow{font-family:var(--font-meta);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#d30805}
.vg-versions h2{font-family:var(--font-ui);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
.vg-versions-lead{margin:0;color:#555;font-size:16px;line-height:1.55;max-width:46ch}
.vg-versions-links{display:flex;flex-direction:column;border-top:1px solid #e3e3e3;margin-top:6px}
.vg-version{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:18px 18px;border-bottom:1px solid #e3e3e3;color:#111;text-decoration:none;transition:background .2s}
.vg-version:hover,.vg-version:focus-visible{background:#f6f6f6}
.vg-version:focus-visible{outline:2px solid #666;outline-offset:-2px}
.vg-version-dot{width:14px;height:14px;border-radius:50%;grid-row:1/3}
.vg-version[data-version="bw"] .vg-version-dot{background:#111}
.vg-version[data-version="color"] .vg-version-dot{background:#d30805}
.vg-version-name{font-size:20px;font-weight:500;line-height:1.2}
.vg-version-count{font-family:var(--font-meta);font-size:13px;color:#777;white-space:nowrap;grid-row:1;grid-column:3}
.vg-version-use{font-size:14px;color:#666;grid-column:2/4}
.vg-version-arrow{display:none}
.vg-versions-art{position:relative;aspect-ratio:1;width:100%;max-width:min(100%,calc(100vh - 220px));margin-inline:auto;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #ececec}
.vg-versions-figure{margin:0;align-items:stretch;display:flex;flex-direction:column;gap:12px;min-width:0}
.vg-versions-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vg-versions-caption{width:100%;max-width:min(100%,calc(100vh - 220px));margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px;font-size:14px;color:#666}
.vg-version.is-active{background:#f6f6f6}
@media(max-width:759px){
  .vg-versions-pin{--vg-head:108px}
  .vg-versions{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:calc(var(--vg-head) + 8px) 16px}
  /* малина от края до края экрана; на низких экранах становится шире, чем выше, чтобы текст влез */
  .vg-versions-art{width:auto;max-width:none;margin-inline:-12px;aspect-ratio:auto;height:min(100vw,calc(100dvh - var(--vg-head) - 320px));border-radius:0;box-shadow:none}
  .vg-versions-caption{max-width:100%}
  .vg-versions-lead{display:none}
  .vg-versions h2{font-size:26px}
  .vg-version{padding:12px 14px}
  .vg-versions-figure{order:-1}
}