.l-grout{margin-top:var(--space-6)}.l-groutField{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;max-width:560px;padding:3px;border-radius:var(--radius-md);background:var(--color-neutral-400);border:2px solid var(--color-neutral-300)}.l-groutTile{position:relative;aspect-ratio:1;border-radius:2px;background:var(--color-neutral-100)}.l-groutTile--flaw{border:3px solid var(--trade)}.l-groutNum{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;flex:none;background:var(--ink);color:var(--color-bg);font-family:Archivo Black,sans-serif;font-size:11px;line-height:1}.l-groutNum--onTile{position:absolute;right:5px;bottom:5px}.l-groutLegend{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-6) 0 0;max-width:62ch}.l-groutLegendRow{display:flex;align-items:flex-start;gap:var(--space-3)}.l-groutLegendRow .l-groutNum{margin-top:2px}.l-groutLegendName{display:block;font-family:Archivo Black,sans-serif;font-size:14px;letter-spacing:-.01em;margin-bottom:2px}.l-groutLegendBody{display:block;max-width:52ch;line-height:1.55}.l-groutCap,.l-groutLegendBody{font-size:14.5px;color:var(--color-neutral-700)}.l-groutCap{margin:var(--space-6) 0 0;max-width:62ch;line-height:1.6}@media (min-width:900px){.l-groutField{grid-template-columns:repeat(6,1fr)}}