.pager {
  margin-bottom: var(--container__padding-bottom);
}

.pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-static--xxxs);
  justify-content: center;
}

.pager__item {
  font-family: var(--font-family--primary);
  font-size: var(--font-size--p-sm);
  font-weight: 600;
  line-height: 1;

  a {
    background-color: var(--color--light-gray);
    border-radius: var(--border-radius);
    border: var(--border-width) solid transparent;
    color: var(--color--blue);
    display: block;
    padding: var(--gap-static--xxs) var(--gap-static--xs);
    transition: border-color var(--transition-dur);

    &:hover {
      border-color: var(--color--orange);
    }
  }

  &.is-active {
    a {
      background-color: var(--color--blue);
      border-color: transparent;
      color: var(--color--white);
    }
  }
}