footer.pagination {
  border-top: 1px solid var(--light-gray);
  font-size: 0.75rem;
  text-align: center;

  & nav {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--light-gray);
    margin: 0.5rem;
    border-radius: 0.25rem;

    & .page + .page {
      border-left: 1px solid var(--light-gray);
    }

    & a {
      padding: 0.25rem;
    }

    & .page:not(.prev):not(.next) {
      display: none;
    }

    @media (min-width: 768px) {
      & .page:not(.prev):not(.next) {
        display: flex;
      }
    }

    & .page.active,
    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;

      &.active {
        background-color: var(--light-blue);
      }
    }

    & a:hover {
      background-color: #eee;
    }

    .page.prev,
    .page.prev a,
    .page.next,
    .page.next a {
      width: 6rem;
    }

    .page.prev a,
    .page.next a {
      padding-left: 1rem;
      padding-right: 1rem;
      width: 100%;
    }

    .page.disabled {
      color: #999;
      text-align: center;
    }
  }
}