/* Examples gallery: every real skill shipped, as cards */
.exg .exg-cards {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.exg-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.exg-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.exg-card h2 { color: var(--white); font-size: 17px; line-height: 1.3; margin: 0; }
.exg-kind {
  flex-shrink: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green); border: 1px solid var(--green-muted); border-radius: 999px; padding: 2px 8px;
}
.exg-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.exg-card dt { color: var(--green); font-size: 13px; font-weight: 600; }
.exg-card dd { color: var(--text); font-size: 13px; line-height: 1.5; margin: 0; }
.exg-card dd.exg-none { color: var(--text-dim); }
.exg-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 4px; }
.exg-more:link, .exg-more:visited { color: var(--text-dim); font-size: 13px; }
.exg-want:link, .exg-want:visited { color: var(--green); font-size: 13px; font-weight: 700; }
.exg-want:hover, .exg-more:hover { color: var(--white); }
.exg-sign { color: var(--text-dim); font-size: 13px; margin-top: 18px; }

@media (max-width: 700px) {
  .exg .exg-cards { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .exg-card dl { grid-template-columns: 1fr; gap: 0; }
  .exg-card dd { margin-bottom: 8px; }
}