.examples { margin: clamp(28px,4vw,48px) 0 0; }
.examples-grid { display:grid; gap:clamp(28px,3.5vw,48px) clamp(16px,2.4vw,32px); grid-template-columns:repeat(4,minmax(0,1fr)); }
.example-card { min-width:0; }
.example-image { isolation:isolate; position:relative; aspect-ratio:1; background:#f5f2ec; border-radius:12px; display:grid; place-items:center; overflow:hidden; color:#7a7266; text-decoration:none; }
.example-image img { position:absolute; inset:0; display:block; height:100%; width:100%; object-fit:contain; transition:transform .35s ease; }
.example-image--photo { background:#ece7dd; }
.example-image--photo img { object-fit:cover; }
.example-card--community img { mix-blend-mode:multiply; }
.example-placeholder { padding:20px; text-align:center; font-size:14px; }
.example-title { color:#4f4940; font:500 15px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; margin:12px 0 0; text-align:center; overflow-wrap:anywhere; text-wrap:pretty; }
.example-title a { color:inherit; text-decoration:none; }
.example-title a:hover { text-decoration:underline; text-underline-offset:3px; }
.example-image:hover img { transform:scale(1.03); }
.example-community { color:#8f877b; font:400 13px/1.45 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; text-align:center; margin:3px 0 0; overflow-wrap:anywhere; }
.examples-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:32px 0 0; }
.examples-actions button { font:inherit; font-size:14px; padding:10px 24px; border:1px solid #716a60; border-radius:999px; color:#4f4940; background:transparent; cursor:pointer; }
.examples-actions button:hover { background:#e9e4da; }
.examples :is(a,button):focus-visible { outline:2px solid #2f2b26; outline-offset:4px; }
.examples [hidden] { display:none!important; }
.examples-enhanced:not(.examples-ready) .example-card:nth-child(n+41) { display:none; }
.examples-status { color:#7a7266; text-align:center; font-size:13px; margin:12px 0 24px; }
@media(max-width:900px) { .examples-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) { .examples-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; } .example-title { font-size:14px; margin-top:8px; } .example-community { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .example-image img { transition:none; } .example-image:hover img { transform:none; } }