.material-board-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.65fr);gap:34px;align-items:stretch;margin-top:30px}
.material-board{position:relative;margin:0;overflow:hidden;background:#ddd}
.material-board img{display:block;width:100%;height:100%;min-height:560px;object-fit:cover}
.material-pin{position:absolute;min-width:42px;height:38px;padding:0 7px;border-radius:20px;display:grid;place-items:center;background:var(--wine);color:#fff;border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 14px rgba(0,0,0,.25);font-size:10px}
.pin-01{left:12%;top:24%}.pin-02{left:55%;top:10%}.pin-03{left:53%;top:31%}.pin-04{left:55%;top:40%}.pin-05{left:67%;top:49%}.pin-06{left:22%;top:68%}.pin-07{left:55%;top:75%}.pin-08{left:88%;top:24%}.pin-09{left:68%;top:84%}
.material-legend{padding:28px 30px;background:var(--paper);border-top:3px solid var(--wine)}
.legend-intro{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 17px}
.material-legend ol{list-style:none;margin:0;padding:0}
.material-legend li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.material-legend li>b{flex:0 0 39px;height:31px;border-radius:17px;display:grid;place-items:center;background:var(--wine);color:#fff;font-size:9px}
.material-legend strong,.material-legend small{display:block}.material-legend strong{font-size:13px}.material-legend small{font-size:11px;color:var(--muted);margin-top:3px}
.styling-visual{margin:28px 0 34px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.55fr);background:var(--ink);color:#fff}
.styling-visual img{display:block;width:100%;height:520px;object-fit:cover}
.styling-visual figcaption{padding:32px;display:flex;flex-direction:column;justify-content:flex-end}
.styling-visual figcaption b{font:400 28px/1.25 Georgia,"Songti SC",serif}
.styling-visual figcaption span{font-size:12px;line-height:1.9;color:#c8bfb8;margin-top:14px}
.material-code{display:inline-flex;margin-top:7px;padding:4px 8px;border:1px solid var(--line);color:var(--wine);font-size:10px;letter-spacing:.05em}
@media(max-width:900px){.material-board-layout,.styling-visual{grid-template-columns:1fr}.material-board img{min-height:0}.styling-visual img{height:auto}.styling-visual figcaption{min-height:190px}.material-pin{transform:scale(.82)}}