.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-block: var(--s8) var(--s12);
}

.page-control,
.page-ellipsis {
  display: inline-grid;
  min-inline-size: var(--control-min-height);
  min-block-size: var(--control-min-height);
  place-items: center;
  border: var(--line) solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  text-decoration: none;
}

.page-control:hover,
.page-control:focus-visible,
.page-control[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.page-control[aria-disabled="true"],
.page-control:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.page-control[aria-disabled="true"] {
  pointer-events: none;
}

.page-ellipsis {
  border-color: transparent;
}

@media (max-width: 420px) {
  .pagination {
    gap: var(--s1);
  }

  .page-control,
  .page-ellipsis {
    min-inline-size: var(--control-min-height);
  }
}