/* Esimerkkejä / Examples: the demo sites as a plain list, on top of the shared public/ink.css (site/examples.mjs).
   The heading on the left, the list on the right; each row the name big, the trade small, an arrow. */
.ex-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: center; min-height: 100svh; padding: 7rem var(--gut) 5rem; }
.ex-page > header { grid-column: 1 / 5; align-self: start; }
.ex-page h1 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.ex-page header p { max-width: 22rem; margin: 1.2rem 0 0; color: var(--ink-2); line-height: 1.55; }
.ex-list { grid-column: 6 / 13; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.ex-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 1.5rem; padding: 1.3rem 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ex-list b { font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2.4rem); letter-spacing: -.02em; transition: color .2s; }
.ex-list span { color: var(--ink-2); font-size: .95rem; }
.ex-go { color: var(--ink-3) !important; }
.ex-list a:hover b { color: var(--pink); }
@media (max-width: 900px) {
  .ex-page { display: block; }
  .ex-page > header { margin-bottom: 2.5rem; }
  .ex-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .ex-list a span:not(.ex-go) { grid-column: 1; grid-row: 2; }
  .ex-go { grid-row: 1; grid-column: 2; }
}