.pagination {
  width: 100%;
  justify-content: center;
  padding: 0 0 5rem 0;

  p {
    display: none;
  }

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  li {
    &.first,
    &.previous,
    &.next,
    &.last {
      a {
        text-indent: -9999px;
        text-decoration: none;

        &:after {
          display: block;
          position: relative;
          top: 50%;
          transform: translate(0, -50%);
          text-indent: 0;
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &.first {
      a {
        &:after {
          content: "<<";
        }
      }
    }

    &.previous {
      a {
        &:after {
          content: "<";
        }
      }
    }

    &.next {
      a {
        &:after {
          content: ">";
        }
      }
    }

    &.last {
      a {
        &:after {
          content: ">>";
        }
      }
    }

    a, strong {
      display: block;
      padding: 8px;
      color: $font;
    }

    strong {
      text-decoration: underline;
    }
  }
}