.document-examples-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.document-example { min-width:0; margin:0; padding:20px; display:flex; flex-direction:column; gap:20px; }
.document-example-media { height:320px; background:#f5f5f7; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; padding:16px; }
.document-example-media picture { display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.document-example-media img { display:block; max-width:100%; width:auto; height:auto; max-height:100%; object-fit:contain; border-radius:0; }
.document-example figcaption h3 { margin:0 0 10px; font-size:1.2rem; }
.document-example figcaption p { color:var(--muted); line-height:1.65; margin:0 0 12px; }
.document-example figcaption a { text-underline-offset:4px; }
.document-examples-note { margin:24px 0 0; color:var(--muted); line-height:1.65; font-size:.92rem; }
@media(max-width:900px) { .document-examples-grid { gap:16px; } .document-example { padding:14px; } .document-example-media { height:240px; padding:10px; } }
@media(max-width:680px) { .document-examples-grid { grid-template-columns:1fr; } .document-example { padding:18px; } .document-example-media { height:300px; } }