.pagination {
  display:block;
  width:100%;

  ol {
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    @include display-xs(){
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom:REM(45px / 3);
    }

    li {
      a, span {
        display:flex;
        width:REM(28px);
        height:REM(28px);
        justify-content: center;
        align-items: center;
        border-radius:100%;
        color:#707070;
        background-color:transparent;
        transition: color .3s ease, background-color .3s ease;
        cursor:pointer;
        font-size:REM(16px);
        @include display-xs(){
          width:REM(60px / 3);
          height:REM(60px / 3);
          font-size:REM(30px / 3);
        }
      }

      &.active,
      &:not(.disabled):not(.active):hover {
        a, span {
          background-color:#02256c;
          color:#fff;
        }
      }

      &.active {
        a, span {
          cursor:default;
        }
      }

      &.disabled {
        a, span {
          opacity:.4;
          cursor:default;
        }
      }

      @include display-xs(){
        display: none;
        &:nth-child(-n+7):not(.prev):not(.next) {
          display: initial;
        }
        &.prev,
        &.next {
          display: initial;
        }
      }
    }
  }
}