.pager {
  margin-block: var(--zoguy-space-7);
}

.pager__items {
  display: flex;
  flex-wrap: wrap;

  gap: var(--zoguy-space-2);

  margin: 0;
  padding: 0;

  list-style: none;
}

.pager__item a {
  display: block;

  padding: 0.5rem 0.75rem;

  border:
    1px solid var(--zoguy-color-border);

  border-radius: var(--zoguy-radius-sm);

  text-decoration: none;
}

.pager__item a:hover {
  border-color: var(--zoguy-teal);

  color: var(--zoguy-teal);
}

.pager__item.is-active a {
  background: var(--zoguy-color-primary);

  border-color:
    var(--zoguy-color-primary);

  color: #fff;
}