.pg { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pg[hidden] { display: none; }
.pg-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg-list li { display: flex; margin: 0; }
.pg-n { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border: 2px solid transparent; border-radius: 52px;
  font-size: 16px; font-weight: 500; line-height: 1; color: #2b302d; font-variant-numeric: tabular-nums; transition: border-color .15s; }
.pg-n:hover { border-color: #d5d9d6; }
.pg-n[aria-current="page"] { border-color: var(--ink); color: var(--ink); }
.pg-gap { align-items: center; justify-content: center; min-width: 24px; height: 48px; font-size: 16px; color: var(--muted); }
.pg-dir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 46px;
  background: rgba(143,210,153,.22); color: #000; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: -.3px; white-space: nowrap; transition: background .2s; }
.pg-dir svg.i { width: 18px; height: 18px; }
a.pg-dir:hover { background: rgba(143,210,153,.4); }
.pg-dir[aria-disabled="true"] { background: var(--grey); color: #8b918d; }
.pg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .pg { flex-wrap: wrap; gap: 16px 8px; }
  .pg-list { order: -1; flex: 0 0 100%; justify-content: center; gap: 2px; }
  .pg-n { min-width: 44px; height: 44px; padding: 0 6px; }
  .pg-gap { min-width: 20px; height: 44px; }
  .pg-dir { flex: 1 1 0; max-width: 220px; }
}